前一篇博文介绍了在<canvas>标签中绘制图形的一些基本方法,本文将进一步介绍如何在<canvas>标签中对图形图像进行操纵。
渐变
Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象,这两个方法的原型如下:
Object createLinearGradient(x1, y1, x2, y2);
创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。
Object createRadialGradient(x1, y1, r1, x2, y2, r2);
创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。
渐变对象创建完成之后必须使用它的addColorStop()方法来添加颜色,该方法的原型如下:
void addColorStop(position, color);
其中position表示添加颜色的位置,取值范围为[0, 1],0表示起点,1表示终点;color表示添加的颜色,取值可以是任何CSS颜色值。
渐变对象创建并配置完成之后就可以将其赋予Context对象的strokeStyle属性或者fillStyle属性,然后绘制的图形就具有了所需的渐变效果。
两种渐变效果的示例如下:
HTML代码:
注:后面示例中的HTML代码均采用以上这段,故不再赘述。
JavaScript代码:
效果如下:
透明
Context对象可以通过改变它的globalAlpha属性来改变生成它的Canvas对象的透明度。globalAlpha属性的取值范围是[0, 1],0表示完全透明,1表示完全不透明。
下面的示例在同一张画布中分别绘制了两块透明度不断变化的区域:
JavaScript代码:
移动
Context对象可以通过调用translate()方法来移动Canvas画布中坐标原点的位置。translate()方法的原型如下:
void translate(x, y);
用于将该Context对象所对应的Canvas的(0, 0)点移动到(x, y)点,并将其作为新的(0, 0)点。通过试验表明,translate()方法是通过把当前(0, 0)点设置为(-x, -y)点来实现这种移动的,并且改变后坐标原点将会影响由该Canvas对象生成的其它Context对象。但是,与Canvas中其它操纵图像的方法一样,translate()也只会影响移动后绘制的图形,对已经绘制到画布中的图形无效。
下面的示例展示了移动的效果:
JavaScript代码:
效果如下:
可以看到最开始画的黑色方块被第一次移动之后画的蓝色方块覆盖了,而用canvas生成了另一个Context对象在其原点处绘制的红色方块出现在移动后的位置。
旋转
与移动一样,Context对象能够调用rotate()方法来按一定的夹角转动Canvas画布。rotate()方法的原型如下:
void rotate(radian);
用于将Canvas画布顺时针转动到与原x轴(横轴)方向成radian角的位置,radian按弧度制,转动后x轴方向同时发生改变。同样,旋转将不会影响到已经绘制的图形但是会影响其它由该Canvas生成的Context对象。
下面的旋转的示例:
JavaScript代码:
效果如下:
缩放
Context对象可以调用scale()方法来控制Canvas在x轴和y轴方向上的缩放比例。scale()方法的原型如下:
void scale(x, y);
其中x、y分别表示在x轴和y轴上的缩放比例,必须是正数。同translate()与rotate()一样,scale也是对整个Canvas对象的改变,但是不会影响已经绘制的图形。
将上例中的
改成
即可看到如下图的效果:
分享到:
相关推荐
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
《HTML5 Canvas核心技术:图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary最新力作。...
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
HTML5 Canvas核心技术:图形、动画与游戏开发 mobi
canvas进阶版ppt,学习canvas必备HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,可以创建...
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
基瑞编著的《HTML5Canvas核心技术:图形动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*...
html5 canvas表示我爱你:玫瑰花动画,非常逼真的玫瑰花,你相信这是用Canvas画出来的吗?不但需要HTML5技术,而且还需要有绘画工底哦,这朵玫瑰花还带有枝叶,非常佩服哦。
HTML5 Canvas核心技术:图形、动画与游戏开发 - (美)基瑞(Geary,D.)著
HTML5 Canvas核心技术 图形、动画与游戏开发
44 第2章 绘制 45 2.1 坐标系统 46 2.2 canvas的绘制模型 47 2.3 矩形的绘制 48 2.4 颜色与透明度 50 2 .5 渐变色与图案 52 2.5.1 渐变色 52 2.5.2 图案 54 2.6 阴影 57 2.7 路径、描边与填充 60 2.7.1 ...
html5+canvas+js头像缩放裁剪
html5 canvas绘制3D地球旋转动画特效
HTML5 Canvas核心技术图形、动画与游戏开发 PDF扫描版[71MB].rar
用vue.js实现的canvas中的元素旋转和平移,同时可以进行缩放,还可以点击连线
html5在线编辑器基于canvas实现
使用hammer.js监听触控时产生的位移,并用Jcanvas.js画出来,从而实现在canvas画布内进行手势的拖拽 旋转 移动 缩放功能....测试时请放在tomcat内,并手机访问. ...优点:可双点触控 同时进行移动缩放旋转效果
1、html5 2、地球旋转 3、canvas