<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)
;清除画布