- //示例 context.beginPath(); //开始路径
- context.moveTo(40, 40); //移动到点(40,40) context.lineTo(300, 40); //画线到点(300,30)
- context.lineTo(40, 300); //画线到点(40,300) context.closePath(); //结束路径
- context.stroke(); //绘制轮廓 //或者填充用context.fill();
2.2.3 圆形
Canvas实际上并没有专门绘制圆形的方法，可以通过画圆弧来模拟圆形。由于圆弧是一种路径，所以画圆弧的API应该包含在beginPath和closePath之间。
2.3 样式
2.3.1 修改线条颜色
- var color; //指定RGB值
- color = "rgb(255, 0, 0)"; //指定RGBA值（最后一个参数为alpha值，取值0.0~1.0）
- color = "rgba(255, 0, 0, 1)"; //指定16进制码
- color = "#FF0000"; //用单词指定
- color = "red"; //设置填充颜色
- context.fillStyle = color; //设置边框颜色
- context.strokeStyle = color;
2.3.2 修改线宽
- //指定线宽值 var value= 3;
- //设置边框颜色 context.linewidth = value;
2.4 绘制文本
- //指定字体样式 context.font = "italic 30px 黑体";
- //在点(40,40)处画文字 context.fillText("Hello world!", 40, 40);
2.5 绘制图像
在绘制图像之前，需要先定义图像并加载。
