在HTML5的新规范中，提供了canvas标记和相关的API可以在网页上进行绘图操作。与之前绘图方式相比，
canvas绘图的优势
- 不借助于第三方的插件和工具
- 不借助于服务器，在客户端完成绘制
canvas绘图的劣势
- 描绘动画效果时，效率不高
<canvas>标记可以理解是一个画布，通过操作下面的这些API完成绘制工作
1. 绘制方式
坐标系
canvas默认左上角是坐标原点(0,0)，向右延伸为x轴的正向，向下延伸为y轴的正向。
理解坐标系
在canvas中绘制方式主要两种
- fill 填充式
- stroke 描边式
2. 绘制线
使用stroke方法
ctx.strokeStyle = "#2BD62D";
ctx.lineWidth = 5;
ctx.moveTo(100,100); //线的起点
ctx.lineTo(300,100); //线的终点
ctx.stroke(); //绘制
3. 绘制矩形
fillRect(起点坐标x,起点坐标y,长,宽)
ctx.fillStyle = "#33CCFF"; //设置填充颜色
ctx.fillRect(0,0,800,600); //绘制矩形，从(0，0)位置,绘制800x600的矩形
ctx.strokeStyle = "#33CCFF"; //设置描边颜色
ctx.lineWidth = 5; //边框的粗细
ctx.strokeRect(0,0,800,600); //绘制矩形，从(0，0)位置,绘制800x600的矩形
4. 绘制圆形/圆弧
arc(圆心坐标x，圆心坐标y，半径，开始角度，结束角度，是否为逆时针绘制);
角度：360度=2*PI；
//绘制圆形
ctx.beginPath();
ctx.fillStyle = "#FF8533";
ctx.arc(500,300,200,0,Math.PI/2,false);//圆心坐标(500,300)，半径是200，顺时针的0-90度的圆
ctx.fill();
ctx.closePath();
5. 绘制扇形
ctx.beginPath()和closePath()之间可以完成闭合操作，设置落笔点为圆心，在最终圆弧闭合时会与圆心产生连线，形成扇形。
ctx.beginPath();
ctx.fillStyle = "#FF8533";
ctx.moveTo(200,300); //设置落笔点为圆心
ctx.arc(200,300,200,0,Math.PI/2,false);
ctx.fill();
ctx.closePath();
6. 绘制渐变色
canvas支持两种方式的渐变色设置
- 线性渐变
var x = ctx.createLinearGradient(开始坐标x, 开始坐标y, 结束坐标x, 结束坐标y);
沿着线的方向，产生渐变
通过
x.addColorStop(0,"#FFFFFF");
设置渐变细节，第一参数的取值范围[0,1]，其中0表示开始位置的颜色，1表示结束位置的颜色
- 径向渐变
var x = ctx.createRadialGradient(开始圆心坐标x,开始圆心坐标y,开始半径,结束圆心坐标x,结束圆心坐标y,结束半径);
也需要使用
x.addColorStop(0,"#FFFFFF");
设置渐变细节
制作一个圆心发散效果圆
<canvas id="can1" width="600" height="400"></canvas>
<script type="text/javascript">
window.onload = function (){
var c = document.getElementById("can1");
var ctx = c.getContext("2d");
ctx.fillStyle = "#66CCFF";
ctx.fillRect(0,0,600,400);
var x = ctx.createRadialGradient(300,200,50,300,200,150);
x.addColorStop(0,"#FFFFFF");
x.addColorStop(0.85,"#FFFF66");
x.addColorStop(1,"#FFFF00");
ctx.beginPath();
ctx.fillStyle = x;
ctx.arc(300,200,150,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();
}
</script>
7. 绘制动画
动画片的原理由多张连续的静止图片组成，快速连续播放时形成动画效果。
canvas动画的原理是一致的，利用setInterval方法每隔一段时间重新绘制图像，间隔很短时就会形成动画效果。
网友评论