HTML5高级篇-canvas

《HTML5高级篇-canvas》由会员分享，可在线阅读，更多相关《HTML5高级篇-canvas（36页珍藏版）》请在文档大全上搜索。

1、HTML5移动开发 Canvas篇内容大纲1. canvas简介2. canvas基础应用3. canvas动画1、canvas简介 canvas 元素本身没有绘图能力，所有的绘制工作必须通过 JavaScript实现。 画布是一个矩形区域，可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。2、基础应用-创建canvas元素您的浏览器不支持HTML5。 该文本内容只在浏览器不支持html5时，显示在网页上。canvas的坐标系统。canvas的路径绘制方法 使用路径，可以绘制线条、连续的曲线以及复合图形。常用方法如下： beginPath丢弃任何当前定义

2、的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。 moveTo 移动路径的绘图起点 。 lineTo 从moveTo定义的点开始绘制连续的路径，或者从上一次的lineTo的终点开始绘制。 closePath 连接最后的点和最初的点并关闭路径绘制。 fill 用颜色填充路径 。 stroke 描绘路径。实例：绘制直线。function drawLine()var cxt=$(#line)0.getContext(2d);cxt.beginPath();/定义画笔的起点cxt.moveTo(10,20);/定义画笔的终点cxt.lineTo(100,50);cxt.lineTo(50,

3、90);cxt.stroke(); 知识点补充 getContext(“2d”) 方法：返回一个用于在画布上绘图的2d环境。canvas的常用属性p设置绘制颜色的属性：fillStyle设置图形的填充颜色。 c.fillStyle = rgb(255, 0, 0); strokeStyle设置图形的描边颜色。 c. strokeStyle= “rgba(255,0,0,0.5); p设置绘制线宽的属性：lineWidth属性改变描边线条的宽度。 c.lineWidth = 20;canvas绘制矩形的方法 fillRect(x, y, width, height)方法：参数x和 y分别表示绘制

4、的矩形的左上角顶点在页面上的坐标值；参数weidth和height表示矩形的宽和高，如： cxt.fillRect(0,0,200,100); strokeRect(x, y, width, height)方法，绘制四周产生描边效果的矩形，如： cxt.strokeRect(50, 50, 100, 100); canvas的曲线绘制方法 语法： arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise); 参数： centerX, centerY：定义一个中心点。 radius：半径。 startingAn

5、gle, endingAngle：起始角度，结束角度。 antiClockwise：绘图方向，顺时针或逆时针。实例：绘制曲线。 var canvas = document.getElementById(myCanvas); var context = canvas.getContext(2d); var centerX = 288; var centerY = 160; var radius = 75; var startingAngle = 1.1 * Math.PI; var endingAngle = 1.9 * Math.PI; var counterclockwise = false

6、; context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise); context.lineWidth = 15; context.strokeStyle = black; / line color context.stroke(); Math.PI表示180度。曲线的详细说明看看上图中的外观 。弧没有超过部分的一个假想的圆的周长 。这个虚构的循环可以被定义centerX，centerY，和半径。接下来，我们可以定义沿所定义的虚圆的周长有两个点的弧本身startingAngle和endin

7、gAngle。这两个角度定义的弧度和形式来自圆心和虚线相交的弧线，我们希望创建两端。弧方法的最后一个参数是逆时针，这是一个可选的参数，它定义的两个结束点之间的 ARC路径的方向。除非另有规定，这种说法是默认为false，这将导致顺时针要绘制弧。 canvas的图形删除方法 如何删除已经绘制的图形？删除图形只需Javascript API提供的一个名为clearRect的方法，其原理是使参数指定的矩形区域背景变为透明。 假设画布长宽分别为500像素，要想删除整个画布图形，可以这样做： c.fillRect(50, 50, 100, 100); c.clearRect(0, 0, 500, 500

8、); 上面的代码执行后，你会什么都看不到，事实上填充的矩形已经绘制，只是瞬间被删除了，所以你看不到它。 如果你不清楚画布的具体宽高，清除整个画布可以这样： c.clearRect(0, 0, canvas.width, canvas.height); 删除画布中的区域删除画布中的区域 如果你不想删除整个画布的图形，而仅仅删除画布中的一个区域，假如，你绘制了一个黑色的正方形，旁边绘制了一个红色的正方形： c.fillRect(50, 50, 100, 100); c.fillStyle = #f00; c.fillRect(200, 50, 100, 100); 接下来你可以通过clearRec

9、t删除黑色背景的正方形而只保留红色正方形： c.clearRect(50, 50, 100, 100); 练习：绘制如下图形。实例：体会beginPath的作用。脚本分析var canvas = document.getElementById(canvas); var ctx = canvas.getContext(2d); ctx.strokeStyle = #666; function useBeginPath() for (var i = 0; i 5; +i) ctx.beginPath(); ctx.rect(10 + i*20, 10 + i*20, 210 - i*40, 210

10、 - i*40); ctx.stroke(); 脚本分析function notUseBeginPath() ctx.beginPath(); for (var i = 0; i 5; +i) ctx.rect(240 + i*20, 10 + i*20, 210 - i*40, 210 - i*40); ctx.stroke(); 3、canvas动画 图片处理 阴影处理 绘制笔迹的保存和恢复 画布坐标系统的处理 文本处理实例：简易时钟 浏览效果添加文本fillText方法。 var text = Hello, World!; context.font = italic 60px serif

11、; context.fillText(text, 40, 40); 该文本不是真实的文字, 而是栏栅化的图形. 绘制文本有两种方法, 分别是用于描边的 strokeText 和用于填字的 fillText 方法. shadowOffsetX, shadowOffsetY 属性属性 指定阴影的水平偏移和垂直偏移。较大的值使得阴影化的对象似乎漂浮在背景的较高位置上。默认值是 0。阴影效果得到 Safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。shadowBlur 属性属性 指定羽化阴影的程度。默认值是 0。阴影效果得到 safari 的支持，但是并没有得到

12、FireFox 1.5 或 Opera 9 的支持。实例：小熊顶蘑菇如何在画布上放置图像？如何在画布上放置图像？var c=document.getElementById(myCanvas); var cxt=c.getContext(2d); var img=new Image(); img.src=“flower.png” ;cxt.drawImage(img,0,0); 要绘制的图像的左上角的位置 。图片变形图片变形 drawImage(image, x, y, width, height) var canvas = document.getElementById(myCanvas);v

13、ar ctx = canvas.getContext(2d); ctx.drawImage(myImage, 50, 50, 100, 100);ctx.drawImage(myImage, 125, 125, 200, 50);ctx.drawImage(myImage, 210, 210, 500, 500);图片裁剪图片裁剪 drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)参数很多，但基本上你可以把它想成从原图中取出一个矩形区域，然后把它画到画布上目标区域

14、里。var canvas = document.getElementById(myCanvas);var ctx = canvas.getContext(2d);ctx.drawImage(myImage, 0, 0, 50, 50, 25, 25, 100, 100);ctx.drawImage(myImage, 125, 125, 100, 100, 125, 125, 150, 150);ctx.drawImage(myImage, 80, 80, 100, 100, 250, 250, 220, 220);onload函数大多数支持canvas标记的浏览器的当前版本中，当图片还没有加载

15、完成时，如果你要去画它，结果是什么事情都不会发生。也就是说，如果你想画一个图片，你需要等它完全加载。你可以使用图片对象的onload函数来进行判断。 myImage = new Image();myImage.src = image.png;myImage.onload = function() / Draw image.Translate方法方法 语法：translate(x,y); 功能：转换画布的用户坐标系统，为画布的变换矩阵添加水平的和垂直的偏移。 实例：实例：translate方法的应用。方法的应用。 var cxt=document.getElementById(canvas) .

16、getContext(2d); cxt.translate(50,50); cxt.strokeStyle=green; cxt.strokeRect(0,0,50,50);此时的坐标(0,0)实际上是(50,50)。save、restore方法 save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 来恢复以前的值。 restore() 方法从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。 实例：save()的应用。1. var cxt=docu

17、ment.getElementById(canvas).getContext(2d); 2./绘制绿色直线3.cxt.beginPath();4.cxt.moveTo(100,50);5.cxt.lineTo(100,100);6.cxt.strokeStyle=green;7.cxt.stroke();8.cxt.save(); 9./绘制红色直线10.cxt.beginPath();11.cxt.moveTo(200,50);12.cxt.lineTo(200,100);13.cxt.strokeStyle=red;14. cxt.restore(); 15.cxt.stroke();图1

18、：实例：分析结果。 第8行的save方法保存了画布中此时的画笔状态，即strokeStyle的属性值“green”。 第14行的restore方法恢复了之前的画笔状态，即画笔的green颜色。覆盖了第14行画笔的red值。 因而绘制出2条绿色直线。实例：save()&restroe()。1. var cxt=document.getElementById(canvas).getContext(2d); 2.cxt.save();3./绘制绿色直线4.cxt.beginPath();5.cxt.rotate(30*Math.PI/180);6.cxt.moveTo(100,50);7.cxt.lineTo(100,100);8.cxt.strokeStyle=green;9.cxt.stroke(); 10./绘制红色直线11.cxt.beginPath();12.cxt.restore();13.cxt.moveTo(200,50);14.cxt.lineTo(200,100);15.cxt.strokeStyle=red;16.cxt.stroke();结果分析：Save()保存了画布的变换矩阵。练习：画出如下图形。