HTML5 Canvas 基础二

最新推荐文章于 2021-06-23 12:23:16 发布

leiyonglin

最新推荐文章于 2021-06-23 12:23:16 发布

阅读量3.6k

点赞数

分类专栏：前端文章标签： html5 function image 图形 javascript api

本文链接：https://blog.csdn.net/leiyonglin/article/details/7430035

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

继续上一篇

先整理一下代码，接下来会继续创建一个带有长跑道的树林。

//使用路径
//将绘制方法单独写
function createCanopyPath(context){
	//开始
	context.beginPath();
	context.moveTo(-35,-50);
	context.lineTo(-15,-80);
	context.lineTo(-25,-80);
	context.lineTo(-5,-110);
	context.lineTo(-15,-110);
	
	context.lineTo(0,-140);
	context.lineTo(15,-110);
	context.lineTo(5,-110);
	context.lineTo(25,-80);
	context.lineTo(15,-80);
	context.lineTo(35,-50);
	
	//闭合路径--将起点和终点连接
	context.closePath();	
}
function drawTrails(){
	var canvas = document.getElementById('trails');
	var context = canvas.getContext('2d');
	
	context.save();
	context.translate(130,150);
	createCanopyPath(context);
	
	context.stroke();
	context.restore();
}
window.addEventListener('load', drawTrails,true);

1、使用描边样式

//线条
context.lineWidth=4;
//路径结合点
context.lineJoin = 'round';
//线条颜色
context.strokeStyle = '#663300';

我们将lineJoin属性设置成round，这是修改当前线段连接方式，让拐角变得更圆滑，也可以把lineJoin属性设置成 bevel 和 miter ，具体怎样亲手试试就知道。

还有一个没有用到的属性--lineCap，可以把它的值设置成 butt、square、round，来指定线条末端样式，示例中图形是闭合的，没有端点。

2、填充样式

//设置填充色
context.fillStyle = '#339900';
context.fill();

3、直接填充矩形区域

不一定需要先画好一个区域再往里填充颜色，可以使用fillRect直接填充出一个矩形

context.fillStyle = '#663300';
//填充树干
context.fillRect(-5,-50,10,50);

松树已经有样子了

4、绘制曲线

canvas 提供了一些列绘制曲线的函数，我们将使用最简单的曲线函数----二次曲线来绘制林荫小路。

//保存Canvas状态并绘制路径
context.save();
context.translate(-10,350);
context.beginPath();

//第一条曲线向右上方弯曲
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);

//第二条曲线向右下方弯曲
context.quadraticCurveTo(310,-250,410,-250);

//使用棕色的粗线条来绘制路径
context.strokeStyle = '#663300';
context.lineWidth = 20;

context.restore();

quadraticCurveTo 函数绘制曲线的起点是当前坐标，带有两组(x,y)参数。第二组是曲线终点，第一组代表控制点(control point)。所谓控制点位于曲线的旁边，其作用相对于曲线长生一个拉力。通过调整控制点的位置，就可以改变曲线的曲率。

5、在Canvas中加入图片

在Canvas中插入图片非常简单，不过需要注意的是：必须等待图片完全加载后才能对其进行操作，浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到Canvas上，那么Canvas将不会显示任何图片。对此开发人员应特别注意，在呈现之前，应确保图片已经加载完毕。

//加载图片

var bark = new Image();
bark.src = 'images/bark.jpg';

//图片加载完成后再进行操作
bark.onload = function(){
    drawTrails();
}

为图片添加onload处理，以确保图像加载完成后才调用。

//用图片填充作为树干的矩形
context.drawImage(bark, -5, -50, 10, 50);

6、渐变

上一步可以看到使用图片填充树干效果，对树干效果不是很满意？我们使用渐变让树干变得稍微好看点。

使用渐变需要三个步骤：

1、创建渐变对象；

2、为渐变对象设置颜色，指明过渡方式；

3、在context上为填充样式或者描边样式设置渐变；

//创建用作树干纹理的渐变
var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);

//树干的左侧边缘是一般程度的棕色
trunkGradient.addColorStop(0, '#663300');

//树干中间偏左位置颜色淡一些
trunkGradient.addColorStop(0.4, '#996600');

//树干右侧边缘的颜色要深一些
trunkGradient.addColorStop(1, '#552200');

//使用渐变色填充树干
context.fillStyle = trunkGradient;
context.fillRect(-5, -50, 10, 50);

//接下来，创建垂直渐变
var canopyShadow = context.createLinearGradient(0,-50, 0, 0);

//投影渐变的起点是透明度设为50%的黑色
canopyShadow.addColorStop(0,'rgba(0, 0, 0, 0.5)');

canopyShadow.addColorStop(0.2, 'rgba(0,0,0,0.0)');

//填充
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);

除了上面演示的线性渐变外，HTML5 还提供了反射性渐变

createRadialGradient(x0, y0, r0, x1, y1, r1);

前三个参数代表以(x0,y0)为圆心半径为r0的圆，后三个参数代表(x1,y1)半径为r1的另一个圆，渐变会在两个圆中间区域出现。

7、使用背景图片
在某些情况下，也可以像CSS那样使用图片作为背景。下面将把路面变为砾石路面。

//加载砾石背景图
var gravel = new Image();
gravel.src = 'images/gravel.jpg';
gravel.onload = function(){
    drawTrails();
}



context.strokeStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.stroke();

createPattern() 方法为贴图图像创建一个模式。

createPattern(image, repetitionStyle)

参数描述
image
需要贴图的图像。

这个参数通常是一个 Image 对象，但是也可以使用一个 Canvas 元素。

repetitionStyle 说明图像如何贴图。可能的值如下所示：
"repeat" - 在各个方向上都对图像贴图。默认值。
"repeat-x" - 只在 X 方向上贴图。
"repeat-y" - 只在 Y 方向上贴图。
"no-repeat" - 不贴图，只使用它一次。

参数	描述
image	需要贴图的图像。这个参数通常是一个 Image 对象，但是也可以使用一个 Canvas 元素。
repetitionStyle	说明图像如何贴图。可能的值如下所示： "repeat" - 在各个方向上都对图像贴图。默认值。 "repeat-x" - 只在 X 方向上贴图。 "repeat-y" - 只在 Y 方向上贴图。 "no-repeat" - 不贴图，只使用它一次。

8、缩放Canvas

树林里怎么可能只有一棵树呢？现在我们来解决这个问题，为了简单起见，我们计划把示例代码中用于绘制数的操作独立出来。

function drawTree(context){
	createCanopyPath(context);
	//线条
	context.lineWidth=4;
	//路径结合点
	context.lineJoin = 'round';
	//线条颜色
	context.strokeStyle = '#663300';
	//设置填充色
	context.fillStyle = '#339900';
	context.fill();
	
	//---------填充树干 --------------------------------------//
	//普通填充
	//context.fillRect(-5,-50,10,50);
	//使用图片填充
	//context.drawImage(bark, -5, -50, 10, 50);	
	
	//--使用渐变填充
	//创建用作树干纹理的渐变
	var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
	//树干的左侧边缘是一般程度的棕色
	trunkGradient.addColorStop(0, '#663300');
	//树干中间偏左位置颜色淡一些
	trunkGradient.addColorStop(0.4, '#996600');
	//树干右侧边缘的颜色要深一些
	trunkGradient.addColorStop(1, '#552200');
	//使用渐变色填充树干
	context.fillStyle = trunkGradient;
	context.fillRect(-5, -50, 10, 50);
	//接下来，创建垂直渐变
	var canopyShadow = context.createLinearGradient(0,-50, 0, 0);
	//投影渐变的起点是透明度设为50%的黑色
	canopyShadow.addColorStop(0,'rgba(0, 0, 0, 0.5)');
	canopyShadow.addColorStop(0.2, 'rgba(0,0,0,0.0)');
	//填充
	context.fillStyle = canopyShadow;
	context.fillRect(-5, -50, 10, 50);
	//--
	context.stroke();

}

drawTree 包含了之前绘制树冠、树干和树干渐变的所有代码，为了在新的位置画出一棵更大的树，我们将使用一种变换方式------缩放函数 context.scale ：

        //绘制第一棵树
	context.save();
	context.translate(130,250);
	drawTree(context);
	context.restore();
	//绘制第二棵树
        context.save();
	context.translate(260,500);
	context.scale(2,2);
	drawTree(context);
	context.restore();

scale函数带有两个参数来分别代表x,y两个纬度的值。

始终在原点执行图像和路径变换操作

为什么要在原点执行图形和路径的变换操作，执行完后再统一平移。理由就是缩放(scale) 和旋转(rotate) 等变换操作都是针对原点进行的。

如果对一个不再原点的图形进行旋转变换，那么rotate变换函数会将图形绕着原点旋转而不是在原地旋转。与之类似，如果缩放操作时没有将图形放置到合适的坐标上，那么所有路径坐标都会被同时缩放。取决于缩放比例的大小，新的坐标可能会超出canvas。

9、Canvas的变换

变换操作不仅限于缩放和平移，我们可以使用 context.rotate(angle) 来旋转图像，甚至可以直接修改底层变换矩阵来完成一系列高级操作，如剪裁图像的绘制路径。

//创建用于填充树干的三阶水平渐变色
context.save();
//x值随着Y值增加而增加，借助拉伸变换，可以创建一树的阴影
context.transform(1,0,-0.5,1,0,0);
//在Y轴方向，将阴影的高度压缩为原来的60%
context.scale(1,0.6);
//使用透明度为20%的黑色填充树干
context.fillStyle = 'rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);

//使用已有的阴影效果重新绘制树
createCanopyPath(context);
context.fill();

context.restore();

这里使用到context.transform,它是canvas 缩放、旋转、平移的集合。

JavaScript syntax:	context.transform(a,b,c,d,e,f);

Parameter	Values	Description	Play it
a	scale-x	X方向缩放率	Play it »
b	skew-x	X方向倾斜度	Play it »
c	skew-y	Skew the the drawings vertically	Play it »
d	scale-y	Scales the drawings vertically	Play it »
e	translate-x	X方向偏移量	Play it »
f	translate-y	Moves the the drawings vertically	Play it »

10、Canvas 文本

在作品完成之际，需要添加一个别致的标题，借此来展示HTML5 Canvas API 强大的文本功能，需要特别注意的是操作Canvas文本的方式语操作其他路径对象的方式相同：可以描绘文本轮廓和填充文本内部，同时所有能够应用于其他图形的变换和样式同样适用于文本。

context对象的文本绘制功能由两个函数组成：

fillText(text, x, y ,maxwidth)
strokeText(text, x, y, maxwidth)

两个方法的参数完全相同，必选参数包括文本内容、坐标。maxwidth是可选项，用于限制字体大小，他会将文本缩放到指定尺寸。此外还有个measureText函数可以使用，该函数会返回一个度量对象，其中包含了当前context环境下指定文本的实际显示宽度。

为了保证文本在各个浏览器下都能正常显示，Canvas API 为 context 提供了类似于css的属性：

属性	值	备注
font	字体
textAlign	start、end、left、right、center	默认start
textBaseline	top、hanging、middle、alphabetic、ideographic、bottom	默认alphabetic

//在canvas上绘制文本
context.save();
//字号为60px,字体为impact
context.font = '60px impact';
context.fillStyle = '#996600';
context.textAlign = 'center';
//绘制
context.fillText('Happy Trails!',200,60,400);
context.restore();

11、应用阴影

最后我们使用内置的Canvas Shadow API 为文字添加阴影模糊效果。

属性	值	备注
shadowColor	颜色值	可以使用透明度
shadowOffsetX	像素值	X方向便宜
shadowOffsetY
shadowBlur	高斯模糊值

//添加阴影效果
context.shadowColor = rgba(0,0,0,0.2);
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;
context.shadowBlur = 2;

hoho，至此树就完全画好了，看下效果图：

本例代码： http://1.ddemo.sinaapp.com/trails.html

leiyonglin

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
HTML5 Canvas 基础二

继续上一篇先整理一下代码，接下来会继续创建一个带有长跑道的树林。//使用路径//将绘制方法单独写function createCanopyPath(context){ //开始 context.beginPath(); context.moveTo(-35,-50); context.lineTo(-15,-80); context.lineTo(-25,-80);
复制链接

扫一扫