阅读量:0
使用canvas时注意点包括：确保浏览器支持、正确创建和获取context、设置宽高、处理坐标系、避免跨域问题等。
1、默认宽高设置
默认尺寸：HTML5 Canvas元素的默认宽度是300像素，高度是150像素。
建议做法：为了避免因CSS设置导致的异常显示，最好在HTML标签中直接设置宽度和高度。<canvas width="500" height="400"></canvas>。
2、浏览器兼容性检测
检测代码：可以通过JavaScript代码判断浏览器是否支持Canvas。
```javascript
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvasunsupported code here
}
```
：在不支持Canvas的浏览器中添加说明，<noscript>您的浏览器不支持Canvas。</noscript>。
3、图形绘制与路径操作
基本形状：Canvas只支持矩形的基本形状绘制，其他图形需要通过路径方法来实现。
路径开始：使用beginPath()方法来开始一个新的路径层，否则会在原来的路径层上继续绘制。
路径闭合：如果不需要路径闭合，可以不使用closePath()，但如果使用了fill()则路径会自动闭合。
4、图像处理
引入图像：PNG、GIF、JPEG等格式的图像都可以引入到Canvas中，其他Canvas元素也可以作为图像来源。
绘制图像：基本的图像绘制代码如下：
```javascript
var img = new Image();
img.onload = function() {
context.drawImage(img, x, y);
};
img.src = 'image.png';
```
图像剪切：可以使用drawImage方法进行图像的剪切和缩放。
5、样式设置
描边和填充：strokeStyle用于设置图形轮廓的颜色，fillStyle用于设置填充颜色。
透明度：可以使用globalAlpha或RGBA颜色值来设置图像透明度。
线宽和端点样式：lineWidth设置线条粗细，lineCap设置线段端点的样式（butt、round、square）。
拐点样式：lineJoin设置线段拐点的样式（miter、round、bevel）。
6、状态保存与恢复
保存状态：使用save()方法保存当前Canvas的状态，包括所有样式和变形。
恢复状态：使用restore()方法恢复到之前保存的状态。
7、变换操作
矩阵变换：使用transform()方法进行平移、旋转、缩放等操作。
重置变换：使用setTransform()方法重置当前的变换矩阵。
8、动画制作
基本原理：动画是通过不断清空画板并重绘来实现的，使用clearRect()方法清空指定区域。
双画布策略：为了提高性能，可以采用双画布策略，一个用于存储用户交互时的绘制操作，另一个用于最终显示。
9、事件绑定
绑定事件：可以为Canvas绑定各种事件处理器，例如鼠标点击、移动等。
10、跨域问题
跨域限制：直接在Canvas中使用drawImage方法加载外部图像文件可能会遇到跨域问题，需要在服务器端处理或使用数据URL方式加载。
以下是两个常见问题及解答：
FAQs
1、如何在Canvas中实现圆形裁剪？
答案：要实现圆形裁剪，可以使用arc()方法结合clip()方法，示例代码如下：
```javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
ctx.clip();
ctx.drawImage(image, 0, 0);
```
2、如何判断浏览器是否支持Canvas？
答案：可以通过检查canvas.getContext方法来判断浏览器是否支持Canvas，示例代码如下：
```javascript
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvasunsupported code here
}
```
Canvas 使用注意点归纳
1. 初始化与尺寸设置
正确设置 canvas 尺寸：使用canvas.width 和canvas.height 属性来设置 canvas 的尺寸，确保它们在初始化时就正确设置，避免后期动态调整导致的渲染问题。
使用style 属性调整：通过修改canvas.style.width 和canvas.style.height 来调整 canvas 在页面上的显示尺寸，但要注意这不会改变 canvas 的实际绘制尺寸。
2. 绘图上下文
获取绘图上下文：使用canvas.getContext('2d') 获取绘图上下文对象，它是绘制图形的必要条件。
注意兼容性：检查浏览器是否支持canvas 和getContext('2d')。
3. 坐标系统
坐标系原点：canvas 的坐标系原点默认位于左上角。
像素单位：所有绘制操作都是在像素单位上进行的。
4. 绘制图形
线条与形状：使用lineTo(),rect(),arc() 等方法绘制线条和形状。
填充与描边：使用fillStyle 和strokeStyle 设置填充和描边颜色。
路径操作：使用beginPath(),moveTo(),lineTo(),closePath() 等方法创建和操作路径。
5. 文本
文本绘制：使用fillText() 或strokeText() 方法绘制文本。
文本样式：通过font 属性设置字体大小和样式。
文本对齐：使用textAlign 和textBaseline 属性控制文本对齐方式。
6. 颜色与渐变
颜色设置：可以使用rgb(),rgba(),hsl(),hsla() 或颜色名称来设置颜色。
线性渐变：使用createLinearGradient() 创建线性渐变。
径向渐变：使用createRadialGradient() 创建径向渐变。
7. 图像处理
加载图像：使用new Image() 对象加载图像。
绘制图像：使用drawImage() 方法将图像绘制到 canvas 上。
图像裁剪：使用drawImage() 的sx,sy,sWidth,sHeight 参数来裁剪图像。
8. 动画与交互
动画循环：使用requestAnimationFrame() 或定时器来实现动画。
交互事件：监听鼠标事件、触摸事件等与用户交互。
9. 性能优化
避免重绘和重排：减少不必要的绘制和布局操作。
使用图层：将复杂的绘制操作拆分为多个图层，可以优化渲染性能。
使用缓存：对于复杂图像处理，可以考虑使用CanvasPixelArray 进行缓存处理。
10. 安全与隐私
避免敏感信息泄露：确保不将敏感信息（如用户数据）存储在 canvas 上。
内容安全策略：使用<canvas> 标签的sandbox 属性来限制 canvas 的内容。
通过遵循以上注意点，可以更有效地使用 canvas 进行图形绘制和动画制作。
