canvas(1) -- canvas的基本属性和常见面试题

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

1. 创建一个画布

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

//这里width和height的单位都是px

2. 开始绘制图像

let canvas = document.getElementById("canvas01"); //获取canvas元素
let ctx = canvas.getContext("2d");//创建2d 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);//清除画布