这篇博客介绍了如何使用HTML5的Canvas元素进行图形绘制，包括创建canvas、绘制直线和多边形，并提供了一个实例——如何绘制七巧板。在JavaScript中，通过context.moveTo()和context.lineTo()可以绘制直线，多个lineTo()调用能形成多边形。同时，使用context.fill()可为图形填充颜色。在绘制多个图形时，利用beginPath()和closePath()来分隔不同的图形。
前言
canvas 是 html5 中的一个新元素，主要用于图形的绘制，通过 JavaScript 来控制。<canvas> 标签定义一个图形容器，也可以叫做画布，通过 js 脚本可以绘制出各种各样的图像。
创建canvas
创建 canvas 只需要添加 canvas 标签就可以了，在创建时，除 id 外一般还会定制画布尺寸（width height）。定义画布尺寸不建议使用 css 的方式定制，这里的尺寸也定义了画布内部的分辨率，是 w3c 的标准用法。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>CanvasDemo</title>
</head>
<body>
<canvas id="canvas" width="768" height="768"></canvas>
</body>
</html>
绘制图形
在 js 中首先要对 canvas 对象初始化。
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d'); // 使用 2d 画图
绘制直线
绘制直线用到的两个函数主要是 context.moveTo(x1, y1) 和 context.lineTo(x2, y2)。表示一条从 (x1, y1) 到 (x2, y2) 的直线， context.lineTo( ) 函数可以多次调用实现多笔画。然后调用 context.stroke( ) 绘制。
// 状态设置
context.moveTo(100,100) // 起点
context.lineTo(700,700)
context.lineTo(700,100)
context.lineWideh = 5 // 画笔宽度
context.strokeStyle = "#005588" // 画笔样式，主要指颜色
// 绘制
context.stroke();
绘制多边形
使用 context.lineTo( ) 可以实现多笔画，因此回到起点的话，就绘制出了一个多边形。
context.moveTo(100,100) // 起点
context.lineTo(
最低0.47元/天 解锁文章
扫一扫
3077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
