阅读量:0
HTML5 Canvas 是一种用于在网页上绘制图形的技术，通过 JavaScript 控制画布和绘制图像。
HTML5 Canvas是一个强大的绘图工具，允许在网页上直接绘制图形和动画，通过JavaScript操作，开发者可以实现从基本图形到复杂动画的各种效果，以下是对HTML5 Canvas的详细介绍：
基本概念
1、定义：Canvas是HTML5提供的一种用于在网页上绘制图形的新特性，最初由苹果公司提出并命名为widget，它通过JavaScript API提供了丰富的绘图功能，可以在网页上绘制各种图形、动画和实现交互效果。
2、元素属性：Canvas元素有两个主要属性：宽度（width）和高度（height），这些属性定义了画布的大小，可以通过内联属性设置。
```html
<canvas width="300px" height="150px" id="canvas">
您的浏览器不支持Canvas
<img src="./backup.jpg" alt="">
</canvas>
```
3、坐标系统：Canvas使用一个基于像素的坐标系统，原点位于左上角，所有绘图操作都基于这个坐标系统进行。
4、渲染上下文：要开始绘图，首先需要获取Canvas的上下文（context），通常使用getContext('2d')方法获取2D上下文。
```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
```
常用绘图API
1、绘制矩形：可以使用fillRect(x, y, width, height)填充矩形，或使用strokeRect(x, y, width, height)绘制矩形边框。
```javascript
ctx.fillRect(0, 0, 50, 50);
ctx.strokeRect(50, 50, 100, 100);
```
2、绘制路径：Canvas支持使用路径（path）来绘制复杂的图形，常用的路径方法包括beginPath(),moveTo(),lineTo(),closePath(),stroke(),fill()等，绘制三角形：
```javascript
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 0);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.fill();
```
3、绘制圆形和圆弧：使用arc(x, y, radius, startAngle, endAngle, anticlockwise)方法绘制圆或圆弧。
```javascript
ctx.beginPath();
ctx.arc(150, 75, 50, 0, Math.PI / 2, false);
ctx.stroke();
```
4、贝塞尔曲线：使用bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)方法绘制贝塞尔曲线。
```javascript
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(0, 123, 100, 9, 100, 100);
ctx.stroke();
```
颜色与样式控制
1、设置颜色：通过设置fillStyle和strokeStyle属性可以改变图形的填充颜色和边框颜色。
```javascript
ctx.fillStyle = 'red'; // 设置填充颜色为红色
ctx.strokeStyle = 'blue'; // 设置描边颜色为蓝色
```
2、设置线宽和线端样式：通过设置lineWidth和lineCap属性可以改变线条的宽度和末端样式。
```javascript
ctx.lineWidth = 5; // 设置线宽为5像素
ctx.lineCap = 'square'; // 设置线端样式为方形
```
常见问题解答
1、问：Canvas和SVG有什么区别？
答：Canvas使用像素渲染，适合绘制大量图形和动画；SVG使用矢量渲染，适合对图形进行交互操作和变形等高级效果。
2、问：如何在Canvas上绘制图像？
答：首先创建一个Image对象并加载图像，然后使用上下文的drawImage方法将图像绘制到Canvas上。
```javascript
var img = new Image();
img.src = 'image.jpg'; // 图像路径
img.onload = function() {
ctx.drawImage(img, 0, 0); // 将图像绘制到Canvas上
};
```
HTML5 Canvas 起步(1) 基本概念
目录
1、简介
2、Canvas 元素
3、画布上下文（Context）
4、常用绘图方法
5、坐标系
6、事件处理
7、归纳
1. 简介
HTML5 Canvas 是一个用于在网页上绘制图形的 HTML5 元素，它提供了一个画布，允许开发者使用 JavaScript 在网页上绘制各种图形，如矩形、圆形、线条、文本等。
2. Canvas 元素
Canvas 元素是一个矩形区域，通过<canvas> 标签创建，以下是一个简单的示例：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
在上面的代码中，id 属性用于引用 canvas 元素，width 和height 属性用于设置 canvas 的尺寸。
3. 画布上下文（Context）
Canvas 元素有一个getContext 方法，用于获取一个绘图上下文对象，这个对象提供了一系列绘图方法，如fillRect、arc、lineTo 等，以下是如何获取 2D 绘图上下文的示例：
var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');4. 常用绘图方法
以下是一些常用的绘图方法：
fillRect(x, y, width, height): 绘制一个填充的矩形。
strokeRect(x, y, width, height): 绘制一个矩形的边框。
arc(x, y, radius, startAngle, endAngle, anticlockwise): 绘制一个圆弧。
lineTo(x, y): 从当前点绘制一条直线到 (x, y)。
fillText(text, x, y): 在指定位置绘制填充的文本。
strokeText(text, x, y): 在指定位置绘制文本的边框。
5. 坐标系
Canvas 的坐标系以左上角为原点 (0, 0)，水平方向向右增加，垂直方向向下增加，这意味着x 坐标从左到右增加，y 坐标从上到下增加。
6. 事件处理
Canvas 支持多种事件，如鼠标点击、拖动等，以下是如何处理鼠标点击事件的示例：
canvas.addEventListener('click', function(e) { var x = e.pageX canvas.offsetLeft; var y = e.pageY canvas.offsetTop; ctx.fillStyle = 'red'; ctx.fillRect(x, y, 10, 10); });7. 归纳
HTML5 Canvas 提供了一个强大的工具，允许开发者在不依赖任何外部库的情况下，在网页上绘制图形，通过学习这些基本概念，你可以开始使用 Canvas 来创建丰富的图形和动画。
