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;

}