Canvas 学习（时钟绘图板）

怼烎@ 2022-10-15 04:00 238阅读 0赞

## canvas画圆 ##

*  为什么需要用canvas，如果用`onmousemove`，每一次移动都会进行DOM重绘，非常消耗性能，这时我们需要看一下 canvas

<div id="canvas"></div>
    <script> canvas.onmousemove = (e) => { let div = document.createElement("div"); div.style.position = "absolute"; div.style.left = e.clientX + "px"; div.style.top = e.clientY + "px"; div.style.width = "6px"; div.style.height = "6px"; div.style.marginLeft = "-3px"; div.style.marginRight = "-3px"; div.style.borderRadius = "50%"; div.style.backgroundColor = "black"; canvas.appendChild(div); } </script>

*  我们现在已经给 canvas 设置一屏宽高，但还是出现滚动条，原因是 canvas 是 inline 元素，设置宽高不起作用，所以需要把它转换成块级元素（**不要这样做，这样做会拉伸元素**）

<canvas id="canvas"></canvas>
    <style> #canvas { height: 100vh; width: 100vw; border: 1px solid red; /* display: block; */ } </style>

*  `<canvas>` 标签只有两个属性\*\*——\*\* `width`和`height`，可以使用 JS 设置canvas 宽高，这里不能直接给 canvas 设置 `height: 100vh;` `width: 100vw;`

let canvas = document.getElementById("canvas");
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.documentElement.clientHeight;

*  canvas画圆

## Canvas ##

### 颜色、样式和阴影 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_fillstyle.asp" rel="nofollow">fillStyle</a></td> 
   <td>设置或返回用于填充绘画的颜色、渐变或模式</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_strokestyle.asp" rel="nofollow">strokeStyle</a></td> 
   <td>设置或返回用于笔触的颜色、渐变或模式</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_shadowcolor.asp" rel="nofollow">shadowColor</a></td> 
   <td>设置或返回用于阴影的颜色</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_shadowblur.asp" rel="nofollow">shadowBlur</a></td> 
   <td>设置或返回用于阴影的模糊级别</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_shadowoffsetx.asp" rel="nofollow">shadowOffsetX</a></td> 
   <td>设置或返回阴影距形状的水平距离</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_shadowoffsety.asp" rel="nofollow">shadowOffsetY</a></td> 
   <td>设置或返回阴影距形状的垂直距离</td> 
  </tr> 
 </tbody> 
</table>

### 线条样式 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_linecap.asp" rel="nofollow">lineCap</a></td> 
   <td>设置或返回线条的结束端点样式</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_linejoin.asp" rel="nofollow">lineJoin</a></td> 
   <td>设置或返回两条线相交时，所创建的拐角类型</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_linewidth.asp" rel="nofollow">lineWidth</a></td> 
   <td>设置或返回当前的线条宽度</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_miterlimit.asp" rel="nofollow">miterLimit</a></td> 
   <td>设置或返回最大斜接长度</td> 
  </tr> 
 </tbody> 
</table>

### 矩形 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_rect.asp" rel="nofollow">rect()</a></td> 
   <td>创建矩形</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_fillrect.asp" rel="nofollow">fillRect()</a></td> 
   <td>绘制“被填充”的矩形</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_strokerect.asp" rel="nofollow">strokeRect()</a></td> 
   <td>绘制矩形（无填充）</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_clearrect.asp" rel="nofollow">clearRect()</a></td> 
   <td>在给定的矩形内清除指定的像素</td> 
  </tr> 
 </tbody> 
</table>

### 路径 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_fill.asp" rel="nofollow">fill()</a></td> 
   <td>填充当前绘图（路径）</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_stroke.asp" rel="nofollow">stroke()</a></td> 
   <td>绘制已定义的路径</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_beginpath.asp" rel="nofollow">beginPath()</a></td> 
   <td>起始一条路径，或重置当前路径</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_moveto.asp" rel="nofollow">moveTo()</a></td> 
   <td>把路径移动到画布中的指定点，不创建线条</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_closepath.asp" rel="nofollow">closePath()</a></td> 
   <td>创建从当前点回到起始点的路径</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_lineto.asp" rel="nofollow">lineTo()</a></td> 
   <td>添加一个新点，然后在画布中创建从该点到最后指定点的线条</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_clip.asp" rel="nofollow">clip()</a></td> 
   <td>从原始画布剪切任意形状和尺寸的区域</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_quadraticcurveto.asp" rel="nofollow">quadraticCurveTo()</a></td> 
   <td>创建二次贝塞尔曲线</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_beziercurveto.asp" rel="nofollow">bezierCurveTo()</a></td> 
   <td>创建三次方贝塞尔曲线</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_arc.asp" rel="nofollow">arc()</a></td> 
   <td>创建弧/曲线（用于创建圆形或部分圆）</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_arcto.asp" rel="nofollow">arcTo()</a></td> 
   <td>创建两切线之间的弧/曲线</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_ispointinpath.asp" rel="nofollow">isPointInPath()</a></td> 
   <td>如果指定的点位于当前路径中，则返回 true，否则返回 false</td> 
  </tr> 
 </tbody> 
</table>

### 转换 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_scale.asp" rel="nofollow">scale()</a></td> 
   <td>缩放当前绘图至更大或更小</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_rotate.asp" rel="nofollow">rotate()</a></td> 
   <td>旋转当前绘图</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_translate.asp" rel="nofollow">translate()</a></td> 
   <td>重新映射画布上的 (0,0) 位置</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_transform.asp" rel="nofollow">transform()</a></td> 
   <td>替换绘图的当前转换矩阵</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_settransform.asp" rel="nofollow">setTransform()</a></td> 
   <td>将当前转换重置为单位矩阵。然后运行 transform()</td> 
  </tr> 
 </tbody> 
</table>

### 文本 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_font.asp" rel="nofollow">font</a></td> 
   <td>设置或返回文本内容的当前字体属性</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_textalign.asp" rel="nofollow">textAlign</a></td> 
   <td>设置或返回文本内容的当前对齐方式</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_textbaseline.asp" rel="nofollow">textBaseline</a></td> 
   <td>设置或返回在绘制文本时使用的当前文本基线</td> 
  </tr> 
 </tbody> 
</table>

### 图像绘制 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/canvas_drawimage.asp" rel="nofollow">drawImage()</a></td> 
   <td>向画布上绘制图像、画布或视频</td> 
  </tr> 
 </tbody> 
</table>

### 像素操作 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>返回 ImageData 对象的宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>返回 ImageData 对象的高度</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>返回一个对象，其包含指定的 ImageData 对象的图像数据</td> 
  </tr> 
 </tbody> 
</table>

## Canvas练习 ##

### 绘制圆形和文本 ###

*  绘制线段

ctx.beginPath();
    // 设置绘制的起始点
    ctx.moveTo(50, 50);
    // 设置经过某个位置
    ctx.lineTo(50, 300);
    ctx.lineTo(300, 100);
    // 设置绘制的结束点
    ctx.closePath();
    
    // 起始路径的线段边缘设置为圆角
    ctx.lineCap = "round";
    // 转折处的线段设置为圆角
    ctx.lineJoin = "round"
    // 设置颜色样式
    ctx.strokeStyle = "aqua";
    ctx.lineWidth = 20;
    ctx.stroke()

*  绘制圆

// 默认为false，顺时针，true逆时针
    // ctx,arc(x, y, radius, startAngle, endAngle, anticlockwise)
    ctx.arc(300, 300, 100, 0, 2 * Math.PI, true);
    ctx.fillStyle = "bisque";
    ctx.fill();
    ctx.stroke();

*  弹幕字体

ctx.font = "50px sans-serif"
    var x = 1200;
    setInterval(function () { 
        ctx.clearRect(0, 0, 1200, 1200);
        x -= 10;
        if (x <= 0) { 
            x = 1200;
        }
        ctx.fillText("hello", x, 100);
        ctx.strokeText("world", x, 200);
    }, 40)

### 绘制图形 ###

*  绘制图像（同一图片）

var img = new Image();
    img.src = "./imgs/2.jpg";
    img.onload = function () { 
        ctx.drawImage(img, 50, 100, 480, 270);
    }
    var img2 = new Image();
    img2.src = "./imgs/3.jpg";
    img2.onload = function () { 
        ctx.drawImage(img2, 400, 400, 480, 270, 100, 400, 480, 270);
    }

*  绘制图像（视频抽帧）

## 绘制时钟 ##

ES6版本参考这个（附带效果）：[https://github.com/llwodexue/clock][https_github.com_llwodexue_clock]

## Canvas 绘图板 ##

绘图板参考（附带效果）： [https://github.com/llwodexue/canvas\_painting][https_github.com_llwodexue_canvas_painting]

![f4a3434097cb9563b96212c79c4d3fc8.gif][]

## 参考 ##

[Fira Code | 为写程序而生的字体][Fira Code _]

[Canvas教程][Canvas]

[Detecting touch screen devices with Javascript][]

[HTML 5 Canvas 参考手册][HTML 5 Canvas]

[https_github.com_llwodexue_clock]: https://github.com/llwodexue/clock
[https_github.com_llwodexue_canvas_painting]: https://github.com/llwodexue/canvas_painting
[f4a3434097cb9563b96212c79c4d3fc8.gif]: /images/20221014/b6fc3a706b884270b83e8f2cfe262a9c.png
[Fira Code _]: https://www.jianshu.com/p/266b4fa2c446
[Canvas]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
[Detecting touch screen devices with Javascript]: https://stackoverflow.com/questions/3974827/detecting-touch-screen-devices-with-javascript
[HTML 5 Canvas]: https://www.w3school.com.cn/tags/html_ref_canvas.asp