canvas实践源码，笔记

跟着b站canvas教程视频做了几个小demo实践，以下是我的笔记（主要在代码注释），以及我的gitee仓库地址：canvas: 参考教程，完成了canvas小项目。code01~code05是基础知识，code06时钟，code07刮刮卡，code08画板（重点）。 (gitee.com)

可使用平台快速完成canvas功能：白鹭科技，three.js(3D)，虚幻4F:\前端\canvas\code\code01.html

canvas三要素：id(作为唯一标识) width height

示例：

<canvas id="canvas1" width="500" height="600">

  </canvas>

<script>

    // 1、找到画布对象

    var canvas1 = document.querySelector("#canvas1");

    // 2、上下文对象（画笔）

    var ctx = canvas1.getContext("2d");

// 设置开始路径

    ctx.beginPath()

    // 设置绘制的起始点

    ctx.moveTo(50, 50)

    ctx.lineTo(50, 300)

    ctx.lineTo(300, 300)

    // 设置结束路径

    ctx.closePath()

    console.log(ctx)

    // 绘制路径

    // lineCap 起始路径的线段边缘设置为圆角

    ctx.lineCap = "round"

    // lineJoin 拐角线段边缘设置为圆角

    ctx.lineJoin = "round"

    ctx.strokeStyle = "aqua"

    ctx.lineWidth = 10

    // 绘制形状 起点到终点

    ctx.stroke()

    // ctx.fill()

  </script>

putImageDate与drawImage比较