HTML5 Canvas画布讲解

HTML5 Canvas是一个可以通过JavaScript脚本进行绘画的网页元素，可以用来创建图形、图标、动画等。以下是一些基本的Canvas绘图操作：

1. 创建Canvas元素

<canvas id="myCanvas" width="200" height="100"></canvas>

2. 使用JavaScript获取Canvas上下文

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

3. 绘制图形

// 绘制一个红色的矩形
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 200, 100);
 
// 绘制一个蓝色的圆形
ctx.beginPath();
ctx.fillStyle = '#0000FF';
ctx.arc(100, 50, 50, 0, 2 * Math.PI);
ctx.fill();

4. 绘制文本

// 设置字体样式并绘制文本
ctx.font = '20px Arial';
ctx.fillText('Hello World', 10, 50);

5. 绘制图像

var img = new Image();
img.src = 'path/to/image.jpg';
 
img.onload = function() {
    ctx.drawImage(img, 0, 0, 200, 100);
};

以上代码演示了如何创建Canvas元素，获取绘图上下文，并使用不同的API绘制基本图形和文本。Canvas是HTML5中一个强大的功能，可以用来创建复杂的交互式图形应用。