使用canvas绘图的几种方法
canvas 标签
要使用 canvas 绘图，需要现在HTML中定义一个画布。
<canvas id="canvas" width="500" height="500">你的浏览器不支持canvas。</canvas>
canvas 元素本身没有绘图能力。所有的绘制工作必须在 JavaScript 内部完成。
定义画布
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
矩形
//实心矩形(x,y,width,height)
ctx.fillStyle = 'green';//填充颜色
ctx.fillRect(50, 50, 100, 200);
//空心矩形
ctx.strokeStyle = 'rgba(255, 122, 33, 0.5)';//描边颜色
ctx.strokeRect(50, 50, 100, 200);
圆形
在闭合路径后，还需要使用 fill() 或 stroke() 方法显示图形。
//圆形
ctx.beginPath();
ctx.arc(70, 18, 15, 0, Math.PI * 2, true);//(x,y,r,sAngle起始角,eAngle结束角,[counterclockwise顺F/逆T时针])
ctx.closePath();
ctx.fill();//填充
ctx.stroke();//描边
线条
在闭合路径后，还需要使用 stroke() 方法显示线条。
//线条
ctx.lineWidth = 10;// 设置线段厚度的属性（即线段的宽度）
ctx.moveTo(0, 0);//起点
ctx.lineTo(150, 50);
ctx.lineTo(0, 50);
ctx.closePath();//自动闭合线条
ctx.stroke();//描边才显示
绘制圆角矩形
我们不仅可以使用 context.arc() 来绘制圆弧和圆形，我们还可以来绘制圆角矩形上的圆角。如下图为我们需要绘制一个圆角矩形：
var x = 120; // 圆角矩形左上角横坐标 var y = 120; // 圆角矩形左上角纵坐标 var width = 250; // 圆角矩形的宽度 var height = 250; // 圆角矩形的高度 var radius = 50; // 圆角的半径 // 开始创建新路径 context.beginPath(); // 绘制左上角圆角 context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); // 绘制顶边路径 context.lineTo(width - radius + x, y); // 绘制右上角圆角 context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); // 绘制右边路径 context.lineTo(width + x, height + y - radius); // 绘制右下角圆角 context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2); // 绘制底边路径 context.lineTo(radius + x, height +y); // 绘制左下角圆角 context.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); // 闭合路径 也可使用 context.lineTo(x, y + radius); context.closePath(); // 设置绘制的颜色 context.strokeStyle = '#188eee'; context.stroke();
绘制文本
- fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的
- strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的
具体参考代码如下：
// 绘制描边字体 context.font = '30px arial'; context.strokeText('描边字体', 50, 50); // 绘制填充字体 context.font = 'italic 60px serif'; context.fillText('填充字体', 50, 100);
渐变
定义好的渐变，还需要使用 fillRect() 等方法填充图形。
//渐变
var grd = ctx.createLinearGradient(0, 0, 100, 200);//线性渐变
grd.addColorStop(0, "#FF0000");//设置渐变开始位置0的颜色
grd.addColorStop(1, "#FFFFFF");//设置渐变结束位置1的颜色
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);//放射状/圆形渐变(x0,y0,r0,x1,y1,r1)，(x0,y0)起始圆坐标，r0起始圆半径，(x1,y1)结束圆坐标，r1结束圆半径
图片
在 canvas 中加载图片，需要先定义一个 image 对象，然后使用 drawImage() 方法绘制图像。需要注意的是使用 src 引用图片后，还需要使用 onload 函数加载方法，才能显示图片。
//图片
var image = new image();
image.src = "image.png";//异步执行，需加载才显示
image.onload = function () {
//执行加载函数
cxt.drawImage(image, 0, 0, 100, 200);//绘制图像(image,x,y,[width],[height])
cxt.drawImage(image, 10, 10, 20, 30, 0, 0, 100, 200);//剪切图像(image, sx, sy, swidth, sheight, x, y, width, height)
}
其他
还可以在 canvas 中加载视频、制作更多图形。
如果想制作 canvas 动画，还需要借助 JavaScript 完成。
