canvas 学习笔记

1.利用上下文对象进行绘制画笔

var canvas=canvas.getContext('2d')

2.绘制路径

canvas.rect(30,30,300,300)

3.填充

canvas.fillStyle('#ddd')

canvas.fill()

4描边

canvas.stroke()

5线段

canvas.moveTo(50,50) //起点

canvas .lineTo(.50,300)//经过位置

canvas .closePath//结束

canvas.stroke()

5线段终点样式

lineCap

6画圆

canvas.arc(300,300,100,Math.PI,false)

canvas.stroke()

//位置，半径，画的长度到π，逆时针

7绘制文本

canvas.fillText()

canvas.strokeText()

8添加图片

function drawIMG() {

const ctx=document.getElementById('contain').getContext('2d')

var img = new Image();

img.onload = function(){

ctx.drawImage(img,35,35,140,140);

  ctx.stroke();
}
img.src =icon;

}