canvas知识点总结

HTML5 Canvas深入解析与应用

最新推荐文章于 2022-11-08 16:22:43 发布

原创

最新推荐文章于 2022-11-08 16:22:43 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #阅读 #canvas

本文总结了HTML5 Canvas的基础知识和高级绘图技巧，包括绘制图形、路径、图像和文字的步骤，以及线性渐变、径向渐变、变形图形、图形组合、阴影效果、图像剪裁、像素处理和动画制作等。通过实例展示了Canvas的强大功能，适合开发者参考学习。

重点内容由于项目中很少涉及canvas相关的知识，我就一直拖着没练习，最近面试了几家公司都问到了对canvas的了解，是时候好好研究一下canvas了，以下是我阅读HTML5和CSS3权威指南这本书关于canvas的总结

一. canvas一般用来干啥

我当时对canvas的抵触点就在于，这不就是个用来画图的吗，能干啥呢，老听别人说他很强大，自己没啥感觉，直到前几天自己动手写了canvas画图小程序，那成就感满满的，总算对canvas有了一点认识我们能用canvas做什么

二.canvas有哪些功能

1.绘制图形
2.使用路径绘图
3.使用图像
4.绘制文字

三.使用canvas的步骤

3.1绘制矩形的步骤如下

1.取得canvas元素var canvas = document.getElementById('canvas');
2.取得上下文var context = canvas.getContext('2d');
3.设定绘图样式（fillStyle和strokeStyle）
4.指定线宽（lineWidth）
5.填充与绘制边框（两种方式fill和stroke）

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillRect(0, 0, 20, 20); 
context.fillStyle = 'rgba(255,255,0,0.25)';
context.fill();
context.fillStyle = 'red';
context.strokeStyle = 'blue';
context.linewidth = 5;
context.fillRect(10, 10, 20,20)
context.strokeRect(10, 10, 20,20)

这里写图片描述

3.2使用路径步骤（首先使用路径勾勒轮廓，然后设置颜色进行绘制）

1.取得canvas元素var canvas = document.getElementById('canvas');
2.取得上下文`var context = canvas.getContext(‘2d’);
3.开始创建路径
4.创建图形的路径
5.路径创建完毕后，关闭路径（若没有关闭下次会重绘上次路径）
6.设定绘制样式，调用绘制方法绘制路径（样式也可提前设置）

var n=0;
for (var i=0; i<10; i++) {
   context.beginPath();
   context.arc(i*25, i*25, i*10, 0, Math.PI*2, true)
   context.closePath();
   context.fillStyle = 'rgba(255,0,0,0.25)';
   context.fill();
}

这里写图片描述
moveTo与lineTo

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = 'rgb(255,255,100)';
context.strokeStyle = 'rgb(100,0,100)';
var n = 0;
var dx = 80;
var dy = 80;
var s = 70;
context.beginPath();
context.fillStyle = 'rgb(255,255,100)';
context.strokeStyle = 'rgb(0,0,100)';
var x = Math.sin(0);
var</