程序设计HTML5 Canvas API

复制代码 代码如下:

<script type=”text/javascript”>

try

{

document.createelement(“canvas”).getcontext(“2d”);

document.getelementbyid(“support”).innerhtml = “ok”;

}

catch (e)

{

document.getelementbyid(“support”).innerhtml = e.message;

}

</script>

加入canvas

<canvas id=”diagonal” style=”border:1px solid blue;” width=”200″ height=”200″/>

复制代码 代码如下:

//取得canvas元素及其绘图上下文var canvas = document.getelementbyid(“diagonal”);

var context = canvas.getcontext(“2d”);

//用绝对坐标来创建一条路径

context.beginpath();

context.moveto(70, 140);

context.lineto(140, 70);

//将这条线绘制到canvas上

context.stroke();

变换

可以通过变换(缩放、平移、旋转)等达到和上面相同的效果。

用变换的方式绘制对角线

复制代码 代码如下:

//取得canvas元素及其绘图上下文

var canvas = document.getelementbyid(“diagonal”);

var context = canvas.getcontext(“2d”);

//保存当前绘图状态

context.save();

//向右下方移动绘图上下文

context.translate(70, 140);

//以原点为起点，绘制与前面相同的线段

context.beginpath();

context.moveto(0, 0);

context.lineto(70, -70);

context.stroke();</p> <p>context.restore();

路径

html5 canvas api中的路径代表你希望呈现的任何形状。

beginpath():不论开始绘制何种图形，第一个需要调用的就是beginpath。这个简单的函数不带任何参数，它用来通知canvas将要开始绘制一个新的图形了。

moveto(x,y):不绘制，将当前位置移动到新的目标坐标(x,y)。

lineto(x,y):不仅将当前位置移动到新的目标坐标(x,y)，而且在两个坐标之间画一条直线。

clopath():这个函数行为和lineto很像，唯一的差别在于clopat建德苞茶h会将路径的起始坐标自动作为目标坐标。它还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭区域，这对将来的填充和描边都非常有用。

绘制一个松树地树冠

复制代码 代码如下:

function c苏武简介reatecanopypath(context) {

// draw the tree canopy

context.beginpath();</p> <p>context.moveto(-25, -50);

context.lineto(-10, -80);

context.lineto(-20, -80);

context.lineto(-5, -110);

context.lineto(-15, -110);</p> <p>// 树的顶点

context.lineto(0, -140);</p> <p>context.lineto(15, -110);

context.lineto(5, -110);

context.lineto(20, -80);

context.lineto(10, -80);

context.lineto(25, -50);

// 连接起点，闭合路径

context.clopath();

}</p> <p>function drawtrails() {

var canvas = document.getelementbyid(‘diagonal’);

var context = canvas.getcontext(‘2d’);</p> <p>context.save();

context.translate(130, 250);</p> <p>// 创建表现树冠的路径

createcanopypath(context);</p> <p>// 绘制当前路径

context.stroke();

context.restore();

}</p> <p>window.addeventlistener(“load”, drawtrails, true);

描边样式

通过描边模式，可以让树冠看起来更加真实。

复制代码 代码如下:

//加宽线条

context.linewidth = 4;

//平滑路径的接合点

context.linejoin = ’round’;

//颜色

context.strokestyle = ‘#663300’;

// 绘制当前路径

context.stroke();

填充样式

context.fillstyle = “#339900”; context.fill();

绘制矩形

我们给树增加树干

context.fillstyle = ‘#663300’; context.fillrect(-5, -50, 10, 50);

绘制曲线

复制代码 代码如下:

context.save();

context.translate(-10, 350);

context.beginpath();</p> <p>// 第一条曲线向右上方弯曲

context.moveto(0, 0);

context.quadra欧美女生图片ticcurveto(170, -50, 260, -190);</p> <p>// 向右下方弯曲

context.quadraticcurveto(310, -250, 410, -250);</p> <p>// draw the path in a wide brown stroke

context.strokestyle = ‘#663300’;

context.linewidth = 20;

context.stroke();</p> <p>// restore the previous canvas state

context.restore();

在canvas中插入图片

必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行时异步加载图片，如果试图在图片未完全加载之前就将其呈现到canvas上，那么 canvas将不会显示任何图片，因此，特别注意，在呈现之前，应确保图片已加载完毕。

复制代码 代码如下:

// 加载图片

var bark = new image();

bark.src = “bark.jpg”;</p> <p>// 图片加载完成后，再调用绘图的函数

bark.onload = function () {

drawtrails();

}

显示图片：

//用背景图案填充，作为树干的背景 context.drawimage(bark, -5, -50, 10, 50);

渐变

使用渐变需要三个步骤：

(1)创建渐变对象

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

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

复制代码 代码如下:

// 创建用作树干纹理的三阶水平渐变

var trunkgradient = context.createlineargradient(-5, -50, 5, -50);</p> <p>// 树干的左侧边缘是一般程度的棕色

trunkgradient.addcolorstop(0, ‘#663300’);</p> <p>// 树干中间偏左的位置颜色要谈一些

trunkgradient.addcolorstop(0.4, ‘#996600’);</p> <p>// 右侧边缘的颜色要深一些

trunkgradient.addcolorstop(1, ‘#552200’);</p> <p>// 使用渐变填充树干

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)’);</p> <p>// 在树干上填充投影渐变

context.fillstyle = canopyshadow;

context.fillrect(-5, -50, 10, 50);

背景图

复制代码 代码如下:

// 加载图片

var gravel = new image();

gravel.src = “gravel.jpg”;

gravel.onload = function () {

drawtrails();

}</p> <p>// 用背景图替代棕色粗线条

context.strokestyle = context.createpattern(gravel, ‘repeat’);

context.linewidth = 20;

context.stroke();

context.createpattern的第二个参数是重复性标记，可以在表2-1中选择合适的值。

平铺方式　　意义repeat(默认值)图片会在两个方向平铺repeat-x横向平铺repeat-y纵向平铺no-repeat图片只显示一次，不平铺

缩放

缩放函数context.scale(x,y)：x,y分别代表在x,y两个维度的值。每个参数在canvas显示图像的时候，向其传递在本方向轴上图像要放大(或缩小)的量。如果x值为2，就代表所绘制图像中全部元素会变成两倍宽，如果y值为0。5，绘制出来的图像会变成之前的一半高。

复制代码 代码如下:

// 在 x=130, y=250 处绘制第一棵树

context.save();

context.translate(130, 250);

drawtree(context);

context.restore();</p> <p>// 在 x=260, y=500 处绘制第二棵树

context.save();

context.translate(260, 500);</p> <p>// 将第二棵树的高宽放大到原来的2倍

context.scale(2, 2);

drawtree(context);

context.restore();

旋转

旋转图像

复制代码 代码如下:

context.save();

//旋转角度参数以弧度为单位

context.rotate(1.57);

context.drawimage(myimage, 0, 0, 100, 100);</p> <p>context.restore();

一种变换的使用方法

复制代码 代码如下:

// 保存当前状态

context.save();</p> <p>// x值随着y值增加而增加，借助拉伸变换，

// 可以创建一棵用作阴影的倾斜的树

// 应用了变换以后，所有坐标都与矩阵相乘

context.transform(1, 0,

-0.5, 1,

, 0);</p> <p>// 在y轴方向，将阴影高度变为原来的60%

context.scale(1, 0.6);</p> <p>// 使用透明度为20%的黑色填充树干

context.fillstyle = ‘rgba(0, 0, 0, 0.2)’;

context.fillrect(-5, -50, 10, 50);</p> <p>// 使用已有的阴影效果重新绘制树

createcanopypat非主流qq个性签名h(context);

context.fill();</p> <p>// 恢复之前的canvas状态

context.restore();

文本

context.filltext(text,x,y,maxwidth):text文本内容，x,y指定文本位置,maxwidth是可选参数，限制文本位置。
context.stroketext(text,x,y,maxwidth):text文本内容，x,y指定文本位置,maxwidth是可选参数，限制文本位置。

复制代码 代码如下:

// 在canvas上绘制文本

context.save();</p> <p>// 字号为60,字体为impact

context.font = “60px impact”;</p> <p>//填充颜色

context.fillstyle = ‘#996600’;

//居中

context.textalign = ‘center’;</p> <p>//绘英语作文万能开头制文本

context.filltext(‘happy trails!’, 200, 60, 400);

context.restore();

阴影

可以通过几种全局context属性来控制阴影

属性　值备注shadowcolor　任何css中的颜色值可以使用透明度（alpha）shadowofftx像素值　值为正数，向右移动阴影;为负数，向左移动阴影shadowoffty像素值值为正数，向下移动阴影;为负数，向上移动阴影shadowblur高斯模糊值值越大，阴影边缘越模糊

复制代码 代码如下:

// 颜色黑色，20%透明度

context.shadowcolor = ‘rgba(0, 0, 0, 0.2)’;</p> <p>// 向右移动15px,向左移动10px

context.shadowofftx = 15;

context.shadowoffty = -10;</p> <p>// 轻微模糊阴影

context.shadowblur = 2;

像素数据

context.getimagedata(sx, sy, sw, sh)：sx,xy确定一个点，sw:宽度，sh:高度。

这个函数返回三个属性：width 每行有多少个像素 height 每列有多少个像素

data 一堆数组，存有从canvas获取的每个像素的rgba值（值红、绿、蓝和透明度）。

context.putimagedata(imagedata,dx,dy)：允许开发人员传入一组图像数据，dx,dy用来指定偏移量，如果使用，则该函数就会跳到指定的canvas位置去更新

显示传进来的像素数据。

canvas.todataurl：可以通过编程获取canvas上当前呈现的数据，获得的数据以文本格式保存，浏览器能将其解析成图像。