canvas面试题

<canvas>标签只是图形容器，必须使用脚本来绘制图形。

1. 创建一个画布

<canvas id="canvasOne" width="300" height="400"></canvas>

width和height的单位都是px

2. 开始绘制图像

let canvas = document.getElementById("canvasOne"); 获取canvas元素
let ctx = canvas.getContext("arrTwo");创建arrTwo context对象

绘制一个红色的矩形

ctx.fillStyle="#FF0000";设置填充的颜色
ctx.fillRect(0,0,150,75);fillRect(横坐标，纵坐标，长，宽)绘制矩形

绘制一条线

ctx.beginPath();开始一条路径
ctx.moveTo(0,0);画笔移动到坐标为0，0的点上
ctx.lineTo(200,100);连接两点成一条线
ctx.stroke();描边，这样这条线才显示出来

画一个圆

ctx.beginPath();
ctx.arc(50,50,100,0,2*Math.PI,false);
圆心的横坐标，圆心的纵坐标，半径，起始度数，结束度数，是否逆时针(默认是false即顺时针)
Math.PI即圆周率==180°
ctx.stroke();

3. canvas的常用属性和方法

ctx = canvas.getContext("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);清除画布