HTML5 canvas 基本语法

下面是关于HTML5 canvas基本语法的攻略，希望对您有所帮助。

HTML5 canvas简介

HTML5中的canvas可以让我们通过JavaScript在网页上绘制二维图形。我们可以在canvas中画线、圆形、矩形、三角形等基本形状。此外，我们也可以在canvas中添加图片和文字，实现丰富的视觉效果。

HTML5 canvas基本语法

要使用canvas，我们需要在HTML代码中添加一个Canvas标签，如下所示：

<canvas id="myCanvas"></canvas>

此外，我们还需要使用JavaScript获取该Canvas的上下文并设置属性：

// 获取Canvas元素
var canvas = document.getElementById("myCanvas");

// 获取上下文
var ctx = canvas.getContext("2d");

// 设置Canvas的宽和高
canvas.width = 500;
canvas.height = 500;

此时，我们已经完成了Canvas的基本设置。可以开始在Canvas上作画了。

HTML5 canvas绘制基本图形

绘制线条

绘制线条需要指定线条的起点和终点。我们可以使用Canvas的moveTo()和lineTo()方法来指定线条的坐标。

// 绘制线条
ctx.beginPath();    // 开始绘制路径
ctx.moveTo(100, 100);    // 移动到起点
ctx.lineTo(300, 100);    // 绘制直线到终点
ctx.stroke();    // 绘制线条

绘制矩形

使用Canvas的rect()方法可以绘制矩形。该方法需要指定矩形的左上角坐标和矩形的宽度和高度。

// 绘制矩形
ctx.fillRect(100, 50, 200, 100);    // 实心矩形
ctx.strokeRect(100, 50, 200, 100);    // 空心矩形

绘制圆形

使用Canvas的arc()方法可以绘制圆形。该方法需要指定圆心坐标、半径和起始角度和结束角度。

// 绘制圆形
ctx.beginPath();    // 开始绘制路径
ctx.arc(250, 250, 50, 0, 2 * Math.PI);    // 绘制圆形
ctx.fill();    // 实心圆形
ctx.stroke();    // 空心圆形

HTML5 canvas添加文字和图片

添加文字

使用Canvas的fillText()方法可以在Canvas上添加文本。该方法需要指定文字内容和文本的坐标。

// 添加文字
ctx.font = "30px Arial";    // 设置字体和大小
ctx.fillText("Hello World", 200, 250);    // 添加实心文本
ctx.strokeText("Hello World", 200, 250);    // 添加空心文本

添加图片

使用Canvas的drawImage()方法可以在Canvas上添加图片。该方法需要指定图片对象和图片的坐标。

// 添加图片
var img = new Image();
img.src = "example.jpg";    // 图片的路径
img.onload = function() {
  ctx.drawImage(img, 0, 0);    // 添加图片
};

HTML5 canvas总结

HTML5 canvas是一个非常强大的工具，可以帮助我们在网页中实现各种绚丽多彩的效果。通过掌握基本语法，我们可以绘制出线条、矩形、圆形等基本形状，并添加文字和图片。在实际使用中，我们还可以结合JavaScript的动画效果，实现更加生动的视觉效果。