canvas 入门

<canvas id="canvas" width="600" height="400">不支持canvas会显示这条内容 </canvas>

/* * @type {HTMLCanvasElement} */
// vscode 添加这行注释可以开始代码提示

let canvas = document.getElementById('canvas');
// 检测是否支持
if(canvas.getContext){
  // 获取上下文
  var ctx=canvas.getContext("2d")
}

属性方法

• strokeStyle 设置或返回描边颜色
• fillStyle 设置或返回填充颜色
• stroke() 描边已定义绘图（路径）
• fill() 填充当前绘图（路径）
• moveTo(x,y) 把路径移动到画布中的指定点，不创建线条。
• lineTo(x,y) 添加一个新点,绘制一条从当前位置到指定新点(x,y)位置的直线。
• lineWidth 设置或返回当前的线条宽度
• lineJoin 设置或返回两条线相交时，所创建的拐角类型
• lineCap 设置或返回线条的结束端点样式
• beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。生成路径的第一步叫做beginPath()。
• closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。不是必需的。

案例

划线

ctx.strokeStyle="red"
ctx.moveTo(10,10)
ctx.lineTo(100,100)
ctx.lineTo(200,50)
ctx.lineTo(300,350)

ctx.lineWidth="5"
ctx.lineCap="round"
ctx.lineJoin="round"

ctx.closePath()
ctx.stroke()