原文地址:https://blog.csdn.net/qq_37674616/article/details/82702158
目录
画布
绘制步骤:
1.获取canvas元素
2.获取2d上下文对象
3.设置默认样式
4.设置线宽
lineWidth=3;在边框绘制的时候使用
5.绘制
状态:
save()
保存坐标、样式、阴影、线宽
restore()
恢复之前保存的样式
案例:绘制三个矩形,是最后一个样式与第一个相同
<canvas id="canvas" width="400px" height="400px">不支持时显示</canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.strokeStyle="blue";
context.strokeRect(10,10,100,100); //'blue'
context.save();//保存绘制的样式 blue
context.strokeStyle="orange";
context.strokeRect(10,120,100,100); //'orange'
context.restore(); //恢复到上一次保存的样式
context.strokeRect(120,120,100,100); //'blue'
context.stroke();
</script>
绘制矩形
fillRect(startX,startY,w,h)
按fillSyle的样式显示填充的矩形。
strokeRect(startX,startX,w,h)
按 strokeStyle显示边框矩形。
clearRect(startX,startY,w,h)
用于清除矩形特定的区域。一般也用于清除画布。
示例
<style>
#canvas{
border-left: 2px solid rgba(0,0,0,0.5);
border-bottom: 2px solid rgba(0,0,0,0.5);
}
</style>
<canvas id="canvas" width="400px" height="400px">不支持该属性</canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.fillStyle="skyblue"; //填充色
context.strokeStyle='blue'; //边框色
context.fillRect(0,300,30,100); //绘制填充矩形
context.strokeRect(35,250,30,150); //绘制边框矩形
context.fillRect(70,230,30,170);
context.clearRect(80,265,10,100); //清除矩形某个区域面积
</script>
绘制路径
步骤:
1.设置路径
2.关闭路径
3.绘制
圆
1.设置路径
arc(圆心x,y,r,开始角度,结束角度,是否逆时针);true 逆时针 false 顺时针
2.关闭路径
closePath()
3.绘制
fill()
stroke()
示例
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.strokeStyle='blue';
context.fillStyle='orange&#