html5程序设计 ppt,(HTML5程序设计及实践)第4章HTML5画布.ppt

谢 谢 Thanks for listening. 第4章 HTML5画布 目录 绘制图像 绘制文字 使用图像 高级特性 Canvas基础 HTML5中提供了Canvas标签，用户实现画布操作，下面的代码实现了一条直线。

绘制直线 strokeStyle设置线的颜色，moveto移动坐标，lineTo从当前坐标看是画线到目标坐标，stroke画线。 context.strokeStyle= "red"; context.moveTo(20,80); context.lineTo(260,80); context.stroke(); 绘制渐变直线 strokeStyle设置线的颜色，moveto移动坐标，lineTo从当前坐标看是画线到目标坐标，stroke画线。 var gradient = cxt.createLinearGradient(0,0,170,0); gradient.addColorStop(0,"blue"); gradient.addColorStop(0.5,"green"); gradient.addColorStop(1,"red"); cxt.strokeStyle = gradient; 绘制填充矩形 fillRect方法有四个参数，分别代表：矩形左上角x坐标、矩形左上角y坐标、矩形宽度、矩形高度。 cxt.fillStyle = "green"; cxt.fillRect(30,30,100,50); 绘制线性渐变的矩形 month类型的表单域，用于选择月份 var gradient = cxt.createLinearGradient(0,0,170,50); gradient.addColorStop(0,"#FF0000"); gradient.addColorStop(1,"#00FF00"); cxt.fillStyle = gradient; cxt.fillRect(30,30,200,80) 绘制圆形或圆弧 week类型的表单域，用于选择周 //绘制一个圆 cxt.beginPath(); cxt.arc(70,70,50,0,2*Math.PI); cxt.stroke(); cxt.closePath(); //绘制一个半圆 cxt.beginPath(); cxt.arc(200,70,50,0,1*Math.PI); cxt.stroke(); cxt.closePath(); 绘制文字 var gradient = cxt.createLinearGradient(0,0,c.width,0); gradient.addColorStop(0,"magenta"); gradient.addColorStop(0.5,"blue"); gradient.addColorStop(1,"red"); cxt.fillStyle = gradient; cxt.font = "30px Verdana"; cxt.fillText("好好学习，天天向上",15,75); 绘制轮廓文字 cxt.strokeStyle = gradient; cxt.font = "30px Verdana"; cxt.strokeText("好好学习，天天向上",15,75); 绘制图片 var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); var img = new Image(); img.onload = function(){ cxt.drawImage(img,0,0); } img.src = "images/view.jpg"; 阴影效果 var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.shadowBlur = 30; cxt.shadowColor = "black"; cxt.fillStyle = "green";