canvas画布
什么是canvas
元素用于图形的绘制通过脚本(通常javascript)来完成,canvas标签只是图形容器
canvas是标签,画布是canvas的一个属性
我们在绘制之前,都需要通过标签来获取到画布,在听过画布来调用绘制的方法
var ig = cc.getContext(“2d”);
绘制流程
1. 开始绘制 (落笔)
ig.beginPath();
2.设置起点
ig.moveTo(30,30);
3.设置终点
ig.lineTo(30,230);
ig.lineTo(230,230);
// 可选(根据当前需求来看)
// 可以将最后一个终点和起点 相连接
ig.closePath();
4.根据 设置的点,来连接
ig.lineWidth = 8; // 设置线宽
ig.strokeStyle = "blue"; // 设置连接线的颜色
ig.stroke(); //连接
ig.restore(); //加载保存过的样式
注意:canvas标签中的宽高必须写在canvas标签中。
画圆arc
参数:
- 在canvas中 x轴上的位置
- 在canvas中 y轴上的位置
- 半径
- 开始角度 Math.PI 约等于 180°
- 结束角度
- 是否逆时针绘制 可选默认顺
ctx.arc(150,100,100,0*Math.PI,Math.PI/180*180);
ctx.strokeStyle = "green";
ctx.lineWidth = 1;
ctx.closePath();
ctx.fillStyle = "red";
// ctx.fill();
ctx.stroke();
canvas画布的一些方法和属性详清W3C
https://www.w3school.com.cn/tags/html_ref_canvas.asp