标签：旋转 false 操作 arc close sla store image 对象
canvas标签，必须要写的3个属性 id width height
为什么不再style中设置width和height呢？
因为这设置width和height话会有位移差；
位移差：在画布里面的元素有偏差；
js中每次使用canvas，都要设置一个绘图环境，然后会得到一个对象，然后对其进行操作；
var c=document.getElementById("") canvas标签的id值；
var d=c.getContext("2d") 设置绘图属性；
然后得到d这个对象，就可以对其进行操作元素里面的属性和方法；
方法和属性(带()的是方法，不带的是属性)：
fillRect()：绘制一个填充方块，默认颜色是黑色； 参数：x,y,w,h (坐标和宽高)
fillStyle：填充颜色 属性值：想要的颜色；
strokeRect()：绘制边框的方框； （如果绘制边框的话，会有2px的偏差，所以设置坐标的话需要在原有的基础上加上0.5），参数同fillRect()
lineWidth：边框粗细；
strokeStyle：线条颜色；
lineJoin：边框圆角 属性值：round 圆，
lineCap：线条圆角；
绘制线条
moveTo()：绘制线段的起点 参数 x,y 坐标位置；
lineTo()：绘制线段的领点 参数 x,y 坐标位置 ； （最后一个lineTo就代表终点）
线条只能有一个moveTo()，但却可以有很多lineTo()
stroke() 绘制线段；
beginPath 开始路径 必须要写对应的关闭路径
closePath 关闭路径
两者同时出现，将绘制路径闭合，起始点和结尾点，首尾相连；
rect() 绘制方块，及不带填充色和线框；
fill() 填充颜色；
clearRect(x,y,width,height) 清除矩形区域
save() restore() 这两个方法成对出现，中间的属性样式，之影响内部，不影响外部；
画圆：
arc()：参数（x,y,半径，开始弧度，结束弧度，时针方向）；
x,y坐标 半径，圆的大小， 开始弧度，一般都是0，结束弧度，一般都是 (0-360)*Math.PI/180， 时针方向，true 逆时针，false 顺时针；
translate() 平移，画布大小位置不变，起始坐标变了 参数 x,y
旋转：rotate() 同translate原理；
需注意一点，需要先通过 translate() 确定起始坐标点，在来操作rotate会比较好
缩放：scale(0.5，0.5) 画布缩放，就是将画布向后移动，跟人的视距就远了，近大远小；
画布中插入图片；drawImage()
var img=new Image()
img.src="图片路径"
img.onload=function(){
d.drawImage(img,x,y,w,h) d就是画布对象，img图片对象，坐标宽高，drawImage()在画布中插入图片
}
插入文字：
strokeText() 插入的文字带边框 参数: "输入的内容" , x , y (坐标)
fillText() 不带边框 参数同strokeText()
textAlign：相对字体的起始点，水平居中
textBaseline：移到字体的起始点，垂直居中
font：字体大小和字形
标签：旋转 false 操作 arc close sla store image 对象
原文地址：https://www.cnblogs.com/bokeyanghao/p/10903742.html
