HTML5 Canvas进阶(二):模式,组合,阴影,状态,变形

原创 2011年10月21日 19:12:37

模式

前面在介绍strokeStyle和fillStyle属性的时候曾说过它们的取值可以是CSS颜色值、渐变对象或者模式对象。在上一篇中已经介绍过渐变对象了,那么这篇的开始就介绍模式对象。

模式对象可以通过Context对象调用createPattern()方法来生成,其原型如下:

Object createPattern(image, patternType);

其中image可以是HTMLImageElement、HTMLCanvasElement或者HTMLVideoElement,是模式操纵的对象;patternType是模式的类型,取值可以是repeat(同时在x、y方向重复)、repeat-x(在x方向重复)、repeat-y(在y方向重复)、no-repeat(不重复),默认为repeat。

需要注意的是模式对象的生成和赋值过程必须写到JavaScript的function中,否则可能会失效。

示例如下:

JavaScript代码:

window.onload = function() {
         var canvas = document.getElementById("canvas"); 
         var context = canvas.getContext("2d");
        
         var img = new Image();
         img.src="http://imgsrc.baidu.com/forum/pic/item/e6b14bc2a4561b1fe4dd3b24.jpg";
        
         var pattern = context.createPattern(img, 'repeat');
         context.fillStyle= pattern;
         context.fillRect(0,0, canvas.width, canvas.height);
}

组合

默认状态下,后绘制的图形就会覆盖在先绘制的图形上。不过可以通过改变Context对象的globalCompositeOperation属性来更改图形相互组合或者覆盖的方式。目前HTML5标准中globalCompositeOperation属性共有12个值,即12种可选的组合方式,但是笔者的试验中使用的chrome 14.0浏览器只支持其中的source-over、destination-over、lighter、xor 4种方式。以下是全部12种可选的组合方式:


注:以上图例中A表示后绘制的红色圆形图案,B表示先绘制的蓝色方形图案。

阴影

Context对象拥有4个用来给图形绘制阴影的属性,分别是:

shadowBlur

阴影的模糊度,默认为0,负数值将会被忽略。

shadowColor

阴影的颜色,默认为#000000,取值可以是任意CSS颜色值。

shadowOffsetX

阴影在x方向上的偏移量,默认为0,不受坐标转换的影响。

shadowOffsetY

阴影在y方向上的偏移量,默认为0,同样不受坐标转换的影响。

在下面的示例中,通过使用lighter组合方式,把阴影从图形的后方转移到了前方:

JavaScript代码:

var canvas =document.getElementById("canvas"); 
var context =canvas.getContext("2d");
 
context.globalCompositeOperation ="lighter";
 
context.shadowBlur = 10;
context.shadowColor = "#a3a3a3";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
 
context.fillStyle = "red";
context.fillRect(50, 50, 100, 100);

状态保存与恢复

Context对象中维持了一个保存当前Canvas状态信息的堆。Canvas的状态信息包含了之前介绍的所有属性信息、当前的变形矩阵以及其它一些必要的内容。同时,Context对象提供了两个方法用于保存和恢复Canvas的状态,其原型如下:

void save();

用于将当前Canvas中的所有状态信息保存入堆中。

void restore();

用于弹出并开始使用堆最上面保存的状态信息。

使用状态保存与恢复的目的是防止绘制代码过于膨胀。比如,你可以在创建画布的Context对象时就把初始的状态保存下来,这样在每次重画时都可以直接恢复成初始的状态,而不用每次都用clearRect()方法擦除。

变形

如前所述,状态信息中很重要的一条就是变形矩阵。通过对变形矩阵进行操作,可以直接改变Context对象将要绘制的图形的形状(与其它方法一样,已经绘制的图形是不能改变的)。

Context对象提供了两个对变形矩阵进行操作的方法,其原型如下:

void setTransform(m11, m12, m21, m22, dx, dy);

用于将当前的变形矩阵设置为

void transform(m11, m12, m21, m22, dx, dy);

用于将当前的变形矩阵乘以

对于变形矩阵,笔者现在还不是很清楚,所以将会在后续的博文中具体阐述。

版权声明:本文为博主原创文章,未经博主允许不得转载。

canvas变形方法transform的可视化演示

canvas 的变形方法transform是三个基本变形方法的结合,他们是 translate——移动;scale——缩放 ;rotate ——旋转,在transform方法中分解为x,y两个方向的...

canvas注意事项,arc()画的圆变形了

canvas跟其他标签一样,也可以通过css来定义样式。但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canvas定义宽高,实际上把宽高为300px * 150p...
  • fyzhu01
  • fyzhu01
  • 2017年05月10日 14:55
  • 368

canvas 变形记——移动、旋转、缩放、变形

canvas 有几个变形形式:移动、旋转、缩放、变形。在做变形之前先保存状态是一个良好的习惯。大多数情况下,调用 restore 方法比手动恢复原先的状态要简单得多。又,如果你是在一个循环中做位移但没...

html5之canvas进阶

1)用路径绘图:    beginPath()——开始一条新路径;    closePath()——尝试闭合现有路径,方法是绘制一条线,连接最后那条线的终点与初始坐标;    fill()——填充用子...
  • bboyjoe
  • bboyjoe
  • 2015年07月28日 14:39
  • 821

学习HTML5 Canvas这一篇文章就够了

一、canvas简介 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时...

Canvas设置宽高 绘图拉伸

每一届换任领导都要搞出一大堆的事情,首先会批判公司上届领导的产品规划的垃圾,然后再推翻垃圾换个模式以他所谓的新颖的超前的认知重新再来。新来的技术总监又搞出这一出,移动端由原生态完全转成H5,应公司的要...

Javascript FLOT画图插件详解

Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图)。 它的特点是使用简单、图形美观,支持鼠标跟踪及缩放功能。 ...

HTML5 Canvas: 二维上下文与当前状态,实时模式/保留模式

原文: http://www.lifelaf.com/blog/?p=354 本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1...
  • enzymer
  • enzymer
  • 2013年06月04日 09:16
  • 1614

HTML5 Canvas进阶(一):渐变,透明,移动,旋转,缩放

前一篇博文介绍了在标签中绘制图形的一些基本方法,本文将进一步介绍如何在标签中对图形图像进行操纵。 渐变 Context对象可以通过createLinearGradient()和createRadi...

HTML5之7 __Canvas: 缩放、旋转、创建阴影

canvas API 的scale() 函数用于缩放.  scale() 带有两个参数,分别代表在x, y 两个维度的值, 每个参数在 canvas 显示图像的时候, 向其传递在本方向轴上图像要放...
  • aduovip
  • aduovip
  • 2015年05月09日 18:50
  • 2067
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 Canvas进阶(二):模式,组合,阴影,状态,变形
举报原因:
原因补充:

(最多只允许输入30个字)