查看专栏目录
canvas示例教程100+专栏，提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。
文章目录
- 语法：
- 示例效果图
- 示例源代码（共90行）
- canvas基本属性
- canvas基础方法
如何使用canvas截取视频图像呢？这里其实是监听了video的内容，将video的当前图像在canvas上面显示出来。
语法：
drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
参数图示
怎样使用canvas绘制美队盾牌呢？这里面要绘制四个不同大小的同心圆，同时在中间位置绘制一个五角星。
示例效果图
示例源代码（共90行）
<canvas class="mycanvas" width="500" height="500">你的浏览器不支持canvas</canvas><script type="text/javascript">let mycanvas = document.querySelector('.mycanvas');let c = mycanvas.getContext('2d');//为了防止样式覆盖，从外往里画//画一个大圆c.beginPath();c.arc(, , , , Math.PI * );c.fillStyle = "#e0dedf";c.fill();c.lineWidth = ;c.strokeStyle = 'rgb(196,30,58)';c.stroke();//画一个小圆c.beginPath();c.arc(, , , , Math.PI * );c.fillStyle = "rgb(0,43,127)";c.fill();c.lineWidth = ;c.strokeStyle = 'rgb(196,30,58)';c.stroke();//画五角星c.beginPath();for(let i = ; i <5 ; i++) {c.lineTo(Math.cos(( + i * ) / * Math.PI) * + , -Math.sin(( + i * ) / * Math.PI) * + );c.lineTo(Math.cos(( + i * ) / * Math.PI) * + , -Math.sin(( + i * ) / * Math.PI) * + );}c.closePath();c.fillStyle = "#e0dedf";c.fill();c.lineWidth = ;c.strokeStyle = 'rgb(0,43,127)';c.stroke();canvas基本属性
| 属性 | 属性 | 属性 |
|---|---|---|
| canvas | fillStyle | filter |
| font | globalAlpha | globalCompositeOperation |
| height | lineCap | lineDashOffset |
| lineJoin | lineWidth | miterLimit |
| shadowBlur | shadowColor | shadowOffsetX |
| shadowOffsetY | strokeStyle | textAlign |
| textBaseline | width |
canvas基础方法
| 方法 | 方法 | 方法 |
|---|---|---|
| arc() | arcTo() | addColorStop() |
| beginPath() | bezierCurveTo() | clearRect() |
| clip() | close() | closePath() |
| createImageData() | createLinearGradient() | createPattern() |
| createRadialGradient() | drawFocusIfNeeded() | drawImage() |
| ellipse() | fill() | fillRect() |
| fillText() | getImageData() | getLineDash() |
| isPointInPath() | isPointInStroke() | lineTo() |
| measureText() | moveTo() | putImageData() |
| quadraticCurveTo() | rect() | restore() |
| rotate() | save() | scale() |
| setLineDash() | setTransform() | stroke() |
| strokeRect() | strokeText() | transform() |
| translate() |
