canvas 入门
(一) 画布
- 创建画布
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
//然后下面使用context来绘制 必须有这两行
</script>(二) 线条入门
- 起点
context.moveTo(100, 100)
//线条的起点的位置就是100，100- 终点
context.lineTo(700, 700)
//终点的位置就是700,700- 填充
//线条填充
context.stroke()上面三步画线条必备
- 状态
context.lineWidth = 10 //设置线条的宽度
context.strokeStyle = '#058' //设置线条的颜色(三) 多线条的组合
多线条的话最后要是使用 strokeStyle 的话 它会按照最后一次来,这样不符合要求
所以要引入一个新的开始 beginPath , closePath
context.lineWidth = 10 //线条的宽度
//线条的宽度不会改变
context.beginPath()
context.moveTo(100, 100)
context.lineTo(700, 400)
context.closePath()
context.strokeStyle = 'red'
context.stroke()
//第二部分
context.beginPath()
context.moveTo(200, 200)
context.lineTo(600, 300)
context.closePath()
context.strokeStyle = 'green'
context.stroke()(四) 线条绘制闭口图形
当绘制完闭口的图形 我们想封闭闭口图形的颜色
fillStyle 填充颜色 fill 填充
这里特别注意的就是 fill 和 stroke()位置 必须先 fill 然后在 stroke 这样最外面的线条才不会被遮挡
context.fillStyle = 'yellow'
context.fill()(五) 绘制矩形,覆盖和透明色
- 绘制矩形(x,y 分别是起点)
context.rect(x, y, width, height) //规划出矩形的路径 没有填充和边框
context.fillRect(x, y, width, height) //填充矩形
context.strokeRect(x, y, width, height) //绘制矩形(六) 线条属性
- lineCap 线条两端的形状
butt(default) , round(圆头) , square(方头)
context.lineCap = 'round' //圆头- lineJoin 线条的连接 当两条线交汇时候,创建圆形的边角
miter(default)(尖角) bevel(斜角) round(圆角)
context.lineJoin = 'bevel' //圆头
//如果要是选择了miter,miterLimit生效
context.miterLimit = 10 //内角和外角的最大值
