canvas（1）--canvas的基本属性和常见⾯试题<canvas> 标签只是图形容器，必须使⽤脚本来绘制图形。
1. 创建⼀个画布
<canvas id="canvas01" width="300" height="400"></canvas>
//这⾥width和height的单位都是px
2. 开始绘制图像
let canvas = ElementById("canvas01"); //获取canvas元素
let ctx = Context("2d");//创建2d context对象
//绘制⼀个红⾊的矩形
ctx.fillStyle="#FF0000"//设置填充的颜⾊
ctx.fillRect(0,0,150,75)//fillRect(横坐标，纵坐标，长，宽)绘制矩形
//绘制⼀条线
ctx.beginPath();//开始⼀条路径
ctx.lineTo(200,100);//连接两点成⼀条线
ctx.stroke();//描边，这样这条线才显⽰出来
//画⼀个圆
ctx.beginPath();
ctx.arc(50,50,100,0,2*Math.PI,false);
svg和canvas的区别//圆⼼的横坐标，圆⼼的纵坐标，半径，起始度数，结束度数，是否逆时针(默认是false即顺时针)
//Math.PI即圆周率==180°
ctx.stroke();
3. canvas的常⽤属性和⽅法
ctx = Context("2d");
ctx.lineWidth = 5;//设置线段宽度
ctx.strokeStyle= "blue"//设置描边颜⾊
ctx.fillStyle="blue"//设置填充颜⾊
ctx.beginPath();//开始⼀条新的路径
ctx.stoke();//描边动作
ctx.fill();//填充动作
ctx.closePath();//闭合路径
ctx.arc(x,y,r,start,stop,false);//画圆
ctx.strokeRect(x,y,width,height);//画矩形
ctx.clearRect(0,0,width,height);//清除画布

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。