扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
在第一天学习了HTML5的一些非常重要的基本知识，今天将进行更深层学习
首先来回顾第一天学习的内容，第一天学习了新标签，新控件，验证功能，应用缓存等内容。
第2天将学习如何使用Canvas 和使用SVG 实现功能
Canvas 是指定了长度和宽度的矩形画布，我们将使用新的HTML5 JavaScript，可使用HTML5 JS API 来画出各种图形。
初始化
1. 创建HTML页面
2. 在Body标签内添加Canvas
3. 在
标签内添加Script 标签4. 在Script 标签内创建JavaScript 函数 Draw ，Draw函数能够访问Canvas 对象
function Draw() { var ctx = document.getElementById('MyCanvas').getContext("2d"); //Canvas Code Comes Here}Path 由0个或多个Sub Path组成，每个Sub path 是是由一个或多个终点组成，每个终点是通过直线或曲线连接的。
Lab1.1.1 使用Single 创建Path;
脚本片段：
ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.moveTo(75, 50); ctx.lineTo(75, 100); ctx.stroke(); ctx.strokeStyle = "red"; ctx.lineTo(25, 100); ctx.stroke();输出：
上述示例中Path 是由2个子路径组成的。
BeginPath—— 创建新路径
strokeStyle 用于设置样式
每次调用Stroke 方法，所有的子路径都会使用当前的Style 重新画。
核心代码：
ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.moveTo(75, 50); ctx.lineTo(75, 100); ctx.stroke(); ctx.beginPath(); ctx.moveTo(75, 100); ctx.strokeStyle = "red"; ctx.lineTo(25, 100); ctx.stroke();输出：
核心代码：
ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.moveTo(75, 50); ctx.lineTo(75, 100); ctx.lineTo(25, 100); ctx.closePath(); ctx.stroke();输出：
核心代码
ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(75, 100); ctx.lineTo(25, 100); ctx.fillStyle = "red"; ctx.fill();输出：
quadraticCurveTo 函数定义了四个参数，前两个点是控制点，用于曲率计算，后两个参数是终点的曲度核心代码：
ctx.beginPath(); ctx.moveTo(175, 50) ctx.quadraticCurveTo(60, 360, 175, 300); ctx.stroke()输出：
Lab1.2.1 画矩形
ctx.fillStyle="red"; ctx.fillRect(75, 75, 150, 150); ctx.strokeStyle = "black"; ctx.lineWidth = 5; ctx.strokeRect(175,175,150,150);输出:
代码：
ctx.fillStyle="red"; ctx.fillRect(75, 75, 250, 250); ctx.clearRect(125, 125, 100, 100);输出
Lab1.3.1 使用线性渐变色
var grd = ctx.createLinearGradient(75, 75, 225, 75); grd.addColorStop(0, "black"); grd.addColorStop(0.2, "magenta"); grd.addColorStop(0.4, "blue"); grd.addColorStop(0.6, "green"); grd.addColorStop(0.8, "yellow"); grd.addColorStop(1, "red"); ctx.fillStyle = grd ctx.fillRect(75, 75, 150, 150);输出
注意：
reateLinearGradient 包含四个参数x1,y1,x2,y2
1. 如果x1=x2 并且y1!=y2,渐变色改变的方向则是水平。
2. 如果y1=y2 并且x1!=x2, 渐变色方向是垂直的。
3. 如果x1!=x2且y1!=y2,渐变色方向则为对角。
AddColorStop 函数包含两个参数。
1. 0到1 之间的数字,用来表示渐变色起始和终点的位置。
2. Color;
Lab1.3.2 使用圆形渐变
代码：
var grd = ctx.createRadialGradient(150, 150, 5, 150, 150,85); grd.addColorStop(0, "orange"); grd.addColorStop(0.2, "magenta"); grd.addColorStop(0.4, "blue"); grd.addColorStop(0.6, "green"); grd.addColorStop(0.8, "yellow"); grd.addColorStop(1, "red"); ctx.fillStyle = grd ctx.fillRect(75, 75, 150, 150);输出
CreateRadialGradiant包含6个参数，x1,y1,r1,x2,y2,r2
1, x1,y1,r1代表开始圆形的圆心和半径
2. x2,y2,r2 表示结束圆的圆心和半径
Lab 1.4 使用圆形
核心代码：
ctx.beginPath(); ctx.fillStyle="yellow"; ctx.strokeStyle="green"; ctx.lineWidth = "8"; ctx.arc(100, 175, 85, 0, 2*Math.PI); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle = "green"; ctx.strokeStyle = "yellow"; ctx.lineWidth = "8"; ctx.arc(285, 175, 85, 0, 1 * Math.PI); ctx.fill(); ctx.stroke();
代码：
ctx.beginPath();
ctx.font = "30px Segoe UI";
ctx.fillText("www.StepByStepSchools.Net",0, 150);输出：
fillText/stokeText具有三个参数
1. 实际输出的文本
2. x,y 是可选值。
Lab 1.6 Scalectx.strokeRect(75, 75, 75, 75); ctx.scale(2,2); ctx.strokeRect(75, 75, 75, 75);
输出：
代码片段：
ctx.rotate(0.2); ctx.strokeRect(75, 75, 75, 75);输出：
代码：
ctx.strokeRect(0, 0, 150, 150); ctx.translate(150, 150); ctx.strokeRect(0, 0, 150, 150);输出：
输出
Lab 1.10 使用图像
vari = new Image(); i.src = "Desert.jpg"; i.onload = function () { //Draw Squqrectx.strokeStyle = "green"; ctx.lineWidth = 5; ctx.drawImage(i, 0, 0); ctx.strokeRect(60, 120, 70, 80); //draw Textctx.strokeStyle = "yellow"; ctx.font = "30px Segoe UI"; ctx.lineWidth = 1; ctx.strokeText("My Home", 80, 40); //Draw Arrowctx.beginPath(); ctx.strokeStyle = "red"; ctx.lineWidth = 2; ctx.moveTo(110, 110); ctx.lineTo(125, 40); ctx.moveTo(110, 110); ctx.lineTo(100, 90); ctx.moveTo(110, 110); ctx.lineTo(126, 95); ctx.stroke(); };输出：
一旦在Canvas 填充好东西就无法修改，可采用以下方法来修改：
1. 使用ClearRect 函数删除存在的元素
2. 添加新属性重画元素
当以上策略与传统的JS 函数结合，可使用TimeOut 或SetInterval 方法来实现，可产生动画。
代码：
var interval; var x = 0, y = 0; functiondrawInAnimation() { varctx = document.getElementById('MyCanvas').getContext("2d"); ctx.beginPath(); ctx.moveTo(x, y); ctx.clearRect(x , y, 50, 50);if (x >document.getElementById('MyCanvas').width) { x = 0; y += 50;if (y + 50 >document.getElementById('MyCanvas').height) { x = 0; y = 0; } }else { x += 15; } ctx.fillStyle = getRndColor(); ctx.fillRect(x, y,50,50); } functiongetRndColor() { var r = 255 * Math.random() | 0, g = 255 * Math.random() | 0, b = 255 * Math.random() | 0; return 'rgb(' + r + ',' + g + ',' + b + ')'; } interval = setInterval("drawInAnimation()", 15);输出：
如Canvas,SVG 支持在矩形中画图像，接下来将了解到Canvas 与SVG 的区别。
初始化
1. 新建HTML页面
2. 在body 标签内新建Canvas :
代码：
输出：
SVG 使得动画制作变得简单：
初始化设置：
眨眼动画：
张嘴动画：
盒子动画效果：
输出
SVG 和Canvas 区别：
Vector VS Pixel
Canvas 是基于Pixel 而SVG 是基于Vector
简单来说SVG图片是与屏幕分辨率无关的，而Canvas 不是。
XML VS JavaScript
SVG使用语义标记可绘出图形，然而Canvas就只能使用JS脚本代码。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网