html5 canvas实例 绘制变形图形 径向渐变
16lz
2021-01-22
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
| createLinearGradient() | 创建线性渐变（用在画布内容上） |
| createPattern() | 在指定的方向上重复指定的元素 |
| createRadialGradient() | 创建放射状/环形的渐变（用在画布内容上） |
| addColorStop() | 规定渐变对象中的颜色和停止位置 |
| rect() | 创建矩形 |
| fillRect() | 绘制“被填充”的矩形 |
| strokeRect() | 绘制矩形（无填充） |
| clearRect() | 在给定的矩形内清除指定的像素 |
| fill() | 填充当前绘图（路径） |
| stroke() | 绘制已定义的路径 |
| beginPath() | 起始一条路径，或重置当前路径 |
| moveTo() | 把路径移动到画布中的指定点，不创建线条 |
| closePath() | 创建从当前点回到起始点的路径 |
| lineTo() | 添加一个新点，然后在画布中创建从该点到最后指定点的线条 |
| scale() | 缩放当前绘图至更大或更小 |
| rotate() | 旋转当前绘图 |
| translate() | 重新映射画布上的 (0,0) 位置 |
| transform() | 替换绘图的当前转换矩阵 |
绘制变形图形：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(id){
var canvas = document.getElementById(id);
if(canvas == null){
return false;
}
var context = canvas.getContext("2d");
context.fillStyle = "#eeeeef";
context.fillRect(0,0,500,500);
context.translate(300,50);
context.fillStyle="rgba(255,0,0,0.25)";
for(var i=0; i<500; i++){
context.fillRect(0,0,80,30);
context.translate(20,20);
context.scale(0.99,0.99);
context.rotate(Math.PI/20);
}
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
效果：
绘制径向渐变图形：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(id){
var canvas = document.getElementById(id);
if(canvas == null){
return false;
}
var context = canvas.getContext("2d");
context.fillStyle = "#eeeeef";
context.fillRect(0,0,500,500);
var g1 = context.createRadialGradient(400,50,50,400,50,400);
g1.addColorStop(0,"rgb(255,255,0)");
g1.addColorStop(0.3,"rgb(255,0,255)");
g1.addColorStop(1,"rgb(0,255,255)");
context.fillStyle = g1;
context.fillRect(0,0,500,500);
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
效果：
更多相关文章
- JSP页面图片路径为中文时乱码解决办法
- html页面中给img标签的src属性赋值为一张图片的存储路径，图片不显
- 帮助相对路径链接到本地文件
- PHP的目录路径问题
- php 获取当前页面url路径
- PHP 站点相对包含，路径的问题解决方法（include,require)
- 使用php浏览文件时，编写文件的完整路径
- nginx + fastcgi php配置下，安全的文件上存路径设置
- php中如何获取文件的正确路径