超全的HTML5画布（Canvas)实例

NedK7 · 2022年10月15日

1.HTML5专门为画布功能提供的标签:<canvas>,所以画布相关的功能都是基于这个标签来完成的;
```
1 <canvas id="canvas" width="550" height="300"></canvas>
2 // 直接在canvas中设置width和height属性和将width和height添加到CSS文件中,有一定的区别:
3 // 1.使用属性来定义canvas,不仅定义canvas对象的宽高,同时也定义了可绘制图形区的宽高;
4 // 2.而使用CSS的方法只能定义canvas本身的大小,不能定义图形绘制区;
```
2.为了能够调用HTML5的画布API,我们需要访问画布的相关上下文(Context);
```
1 var canvas = document.getElementById('canvas'),
2     context = canvas.getContext('2d');
3 // 使用context可以调用更多的方法来绘制;
```
二使用HTML5画布绘制直线

1.beginPath():开始绘制准备;

2.moveTo():绘制的起始坐标(x,y);

3.lineTo():绘制的结束坐标(x,y);

4.stroke():立刻开始绘制直线;
```
1 var canvas = document.getElementById('Canvas'),
2     context  = canvas.getContext('2d');
3 context.beginPath();
4 context.moveTo(150, 100);
5 context.lineTo(300, 200);
6 context.stroke();
```
三设置直线的粗细
```
1 context.lineWidth = 20;      // 设置直线的宽度为20px;
2 // 须在调用stroke()方法前设置这个属性;否则此属性无效;
```
四设置绘制直线的颜色
```
1 context.strokeStyle = '#dd4814';     // 设置直线颜色;
2 // 须在调用stroke()方法前设置这个属性;否则此属性无效;
```
五设置直线两端的样式

1.context.lineCap = 'butt'; // 绘制按钮类型;

2.context.lineCap = 'round'; // 绘制圆角类型;

3.context.lineCap = 'square'; // 绘制正方形类型;

http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091917395043899.png

六绘制弧形

// HTML5画布使用arc()方法来绘制相关的弧形;

http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif
```
1 arc(
2     x,                  // 定义圆心x坐标;
3     y,                  // 定义圆心y坐标;
4     radius,             // 半径;
5     startAngle,         // 起始角度;
6     endAngle,           // 结束角度;
7     counterClockWise,   // 是否是逆时针方向;
8     )
```
http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif
```
1 var x = 200, y = 150, radius = 60, startAngle = 0.5*Math.PI, endAngle = 1.5*Math.PI, counterClockWise = false;
2 context.beginPath();
3 context.arc(x, y, radius, startAngle, endAngle, counterClockWise);
4 context.strokeStyle = 'black';
5 context.lineWidth = 15;
6 context.stroke();
```
http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091924107544761.png

七生成二次曲线

// 二次曲线通过控制两根虚拟的直线来生成对应的图形;
```
context.beginPath();
context.moveTo(100, 200);
context.quadraticCurveTo(150, 50, 200, 200);
context.lineWidth = 20;
context.strokeStyle = '#dd4814';
context.stroke();
```
http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091926152545197.png

八生成贝塞尔曲线

// 相对于二次曲线来说,贝塞尔曲线增加了一个控制点来生成更复杂的曲线样式;
```
1 context.beginPath();
2 context.moveTo(188, 130);
3 context.bezierCurveTo(140, 10, 388, 10, 388, 170);
4 context.lineWidth = 20;
5 context.strokeStyle = '#dd4814';
6 context.stroke();
```
http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091927077542236.png

九 HTML5路径

// 使用HTML5的路径(path),可以连接多个子路经;

// 上一个路径的结束点即成为下一个路径的起始点;

1.lineTo();

2.arcTo();

3.quadraticCruveTo(); // 向下弯曲;

4.bezierCurveTo(); // 先向上弯曲,再向下弯曲;

http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091928207233561.png

http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif
```
1 context.beginPath();
2 context.moveTo(100, 20);
3 context.lineTo(200, 160);
4 context.quadraticCurveTo(230, 200, 250, 120);
5 context.bezierCurveTo(290, -40, 300, 200, 400, 150);
6 context.lineTo(500, 90);
7 context.lineWidth = 15;
8 context.strokeStyle = '#dd4814';
9 context.stroke();
```
http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif

http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091937405192449.png

十设置直线的连接样式

// 在HTML5画布中直线的连接样式(linejoin)可以有不同类型;

1.miter:直角连接;

2.round:圆角连接;

3.bevel:去角连接;
```
1 context.beginPath();
2 context.moveTo(99, 150);
3 context.lineTo(149, 50);
4 context.lineTo(199, 150);
5 context.lineJoin = 'miter';
6 context.stroke();
```
http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091934455353089.png

十一 arcTo生成矩形圆角效果

// HTML5画布中我们可以使用arcTo方法来生成矩形圆角效果;

http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif
```
 1 var rectWidth = 200;
 2 var rectHeight = 100;
 3 var rectX = 189, rectY = 100;
 4 var cornerRadius = 50;
 5 context.beginPath();
 6 context.moveTo(rectX, rectY);
 7 context.lineTo(rectX + rectWidth - cornerRadius, rectY);
 8 context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
 9 context.lineTo(rectX + rectWidth, rectY + cornerRadius + rectHeight);
10 context.lineWidth = 15;
11 context.stroke();
```
http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif

http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091940393488981.png

十二画布生成闭合的图形

// 在HTML5画布中,我们使用beginPath方法开始路径设置,同时使用closePath方法来闭合路径;

http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif
```
 1 context.beginPath();
 2 context.moveTo(170, 80);
 3 context.bezierCurveTo(130, 100, 130, 150, 230, 150);
 4 context.bezierCurveTo(250, 180, 320, 180, 340, 150);
 5 context.bezierCurveTo(420, 150, 420, 120, 390, 100);
 6 context.bezierCurveTo(430, 40, 370, 30, 340, 50);
 7 context.bezierCurveTo(320, 5, 250, 20, 250, 50);
 8 context.bezierCurveTo(200, 5, 150, 20, 170, 80);
 9 context.closePath();
10 context.lineWidth = 15;
11 context.lineJoin = 'round';
12 context.strokeStyle = '#dd4814';
13 context.stroke();
```
http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif

http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091944414418675.png

十三使用HTML5画布生成正方形或者矩形

// rect(x, y, w, h);

// x,y代表矩形的左上角坐标;w是指矩形的宽度;h是指矩形的长度;
```
context.beginPath();
context.rect(100, 50, 200, 200);    // 绘制宽高;
context.fillStyle = '#dd4814';      // 设置填充颜色;
context.fill();                     // 绘制结束;
```
http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091946155822902.png

十四绘制圆形

// 在HTML5画布中,如果需要生成一个原型,可以通过调用arc()方法来实现;

// 只需要设置起始角度为0,终止角度是2*Math.PI;

http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif
```
 1 var centerX = canvas.width/2,
 2     centerY = canvas.height/2,
 3     radius = 80;
 4 context.beginPath();
 5 context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
 6 context.fillStyle = '#dd4814';      // 内填充颜色;
 7 context.fill();                     // 设置内填充;
 8 
 9 context.lineWidth = 12;             // 描边宽度;
10 context.strokeStyle = 'orange';     // 描边颜色;
11 context.stroke();                   // 设置描边;
12 // 若同时使用了fill()和stroke(),务必保证fill()在stroke()之前调用,否则stroke()绘制的线会被fill()遮住一半;
```
http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif

http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091947088947057.png

十五 HTML5画布生成线性渐变效果

1.createLinearGradient(x0, y0, x1, y1);

// x0,y0代表了渐变开始点坐标;x1,y1代表了结束点坐标;

2.addColorStop(stop, color);

// 设置渐变方向后,可以使用addColorStop来设置渐变的颜色;

// stop介于0~1之间的值,表示渐变中开始与结束之间的位置;color代表颜色值;
```
1 context.rect(0, 0, canvas.width, canvas.height);
2 var gridi = context.createLinearGradient(0, 0, canvas.width, canvas.height);
3 gridi.addColorStop(0, 'orange');
4 gridi.addColorStop(1, '#dd4814');
5 context.fillStyle = gridi;
6 context.fill();
```
http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091948289265074.png

十六 HTML5画布绘制径向渐变;

var gridi = context.createRadialGradient(275, 150, 50, 275, 150, 200);

// 起始点X坐标, 起始点Y坐标, 起始点半径, 渐变结束点X坐标, 渐变结束点Y坐标, 结束点半径;
```
1 gridi.addColorStop(0, '#dd4814');
2 gridi.addColorStop(1, '#ffff66');
3 context.fillStyle = gridi;
4 context.fillRect(0, 0, 550, 300);
```
http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091949525829263.png

十七 HTML5画布中添加背景图案

createPattern(image, repetition);

// image:对应的图片对象;

// repetition:图片的重复属性;默认值是repeat;

http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif
```
 1 var image = new Image();
 2 image.onload = function () {
 3     // 这里确保图片加载后再执行HTML5画布相关的方法;
 4     var pattern = context.createPattern(image, 'repeat');
 5     context.rect(0, 0, 550, 300);
 6     context.fillStyle = pattern;
 7     context.fill();
 8 }
 9 // 设置背景图案的地址:
10 image.src = 'http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg';
```
http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif

http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091951105515151.png

十八 HTML5画布绘图

// 使用drawImage()方法来绘制图形;

http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif
```
1 var image = new Image();
2 image.onload = function(){
3     context.drawImage(image, 100, 50, 200, 125);
4     // 绘制图片image,第二和第三个参数表示图片距离canvas左上角的left和top距离;
5     // 第四和第五个参数表示绘制图片的宽度和高度;
6 }
7 image.src = 'http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg';
```
http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif

http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091952541918013.png

十九画布实现图片裁剪

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

// sx:相对于图片自身裁剪的左边距离;

// sy:相对于图片自身裁剪的顶端距离;

// sw:裁剪的图片宽度;

// sh:裁剪的图片高度;

// dx:图片裁剪后相对于画布左端距离;

// dy:图片裁剪后相对于画布顶端距离;

// dw:图片裁剪后设置宽度;

// dy:图片裁剪后设置高度;

http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091953417698449.png
```
1 var image = new Image();
2 image.onload = function(){
3     context.drawImage(image, 100, 50, 100, 84, 50, 50, 100, 84);
4 };
5 image.src = 'http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg';
```
http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091954262073624.png

二十 HTML画布添加文字

// 使用fillStyle属性来设置字体颜色;

context.fillStyle = '#dd4814'; // 注意:在fillText()之前设置fillStyle的值;

// 使用相关属性,可以定义文字属性,

context.font = 'bold 30pt "microsoft yahei"';

// 使用fillText()方法添加相关文字;

context.fillText(text, x, y);
```
1 context.font = 'bold 30pt "microsoft yahei"';
2 context.fillStyle = '#dd4814';
3 context.fillText('Hello World!', 150, 160);
```
http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_101014054571429.png

二十一 HTML画布添加描边文字

// 使用strokeText()方法可以添加描边文字类型;

// 并且可以使用strokeStyle()来设置描边颜色;

http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif
```
1 context.font = 'bold 30pt "microsoft yahei"';
2 context.fillStyle = '#ff6';
3 context.fillText('Hello World!', 150, 160);
4 context.strokeStyle = '#dd4814';
5 context.lineWidth = 2;
6 context.strokeText('Hello World!', 150, 160);
7 // 如果需要同时使用fillText()和strokeText()方法,务必先调用fillText()方法;
```
http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif

http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_101017478161163.png

二十二 HTML画布文字对齐

// 在HTML5画布中,我们使用textAlign属性来定义文字的对齐;

1.center-居中;

2.left-居左;

3.right-居右;

4.start-文字方向从左到右;

5.end-文字方向从右到左;
```
1 context.font = 'bold 30pt "microsoft yahei"';
2 context.textAlign = 'right';
3 context.fillText('Hello World!', 275, 150);
4 // 基于坐标点(275, 150)的右对齐;
```
http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_101034556766211.png

二十四 HTML5画布获取文字度量

// 在HTML5画布中,我们可以使用measureText方法来获取文字的相关度量信息对象;

// 其中包含一个属性,即文字宽度;基于文字的大小和字体,它可以提供一个准确的文字宽度;

http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif
```
 1 var x = canvas.width/2,
 2     y = canvas.height/2 - 10;
 3 var text = 'Hello HTML5';
 4 
 5 context.font = 'bold 30pt "microsoft yahei"';
 6 context.textAlign = "center";
 7 context.fillStyle = 'red';
 8 context.fillText(text, x, y);
 9 
10 // 以下代码获取上面定义的text的相关metrics信息;
11 var metrics = context.measureText(text);
12 var width = metrics.width;
13 context.font = '15pt Arial';
14 context.textAlign = 'center';
15 context.fillStyle = '#888';
16 context.fillText('- ' + width + 'px -', x, y+45);
```

登录

游客您好，欢迎来到黑客世界论坛！您可以在这里进行注册。

超全的HTML5画布（Canvas)实例

推荐的帖子

二 使用HTML5画布绘制直线

三 设置直线的粗细

四 设置绘制直线的颜色

五 设置直线两端的样式

六 绘制弧形

七 生成二次曲线

八 生成贝塞尔曲线

九 HTML5路径

十 设置直线的连接样式

十一 arcTo生成矩形圆角效果

十二 画布生成闭合的图形

十三 使用HTML5画布生成正方形或者矩形

十四 绘制圆形

十五 HTML5画布生成线性渐变效果

十六 HTML5画布绘制径向渐变;

十七 HTML5画布中添加背景图案

十八 HTML5画布绘图

十九 画布实现图片裁剪

二十 HTML画布添加文字

二十一 HTML画布添加描边文字

二十二 HTML画布文字对齐

二十四 HTML5画布获取文字度量

链接帖子

意见的链接

分享到其他网站

黑客攻防讨论组

黑客攻防讨论组

最近浏览 0位会员

黑客世界站内导航 (SITE MAP)

二使用HTML5画布绘制直线

三设置直线的粗细

四设置绘制直线的颜色

五设置直线两端的样式

六绘制弧形

七生成二次曲线

八生成贝塞尔曲线

十设置直线的连接样式

十二画布生成闭合的图形

十三使用HTML5画布生成正方形或者矩形

十四绘制圆形

十九画布实现图片裁剪