day1.新的语义标签和属性

1、复习：HTML5 新特性：1.新的语义和属性2.表单 2.03.和音频Canvas 绘图SVG 绘图地理定位拖放APIWebWorker 9.WebStorage 10.WebSocketCanvas 绘图使用方法： var ctx = c.getContext(2d);/绘制矩形ctx.fillRect() ctx.strokeRect() ctx.clearRect()/绘制文本ctx.fillText() ctx.strokeText() ctx.measureText()/绘制路径ctx.beginPath() ctx.closePath() ctx.moveTo() ctx.line

2、To() ctx.arc() ctx.stroke() ctx.fill()ctx.clip()/绘制图像 ctx.drawImage()/图形图像变形ctx.translate()ctx.roe()ctx.scale()ctx.save()ctx.restore()今日目标：补充：Canvas 小知识点SVG 绘图技术 重点(3)第2D 绘图工具 Two.js 了解1.如何等待所有加载完成后，才开始绘图？多张绘制需要按照特定的顺序，而加载完成顺序是完全无法，只能等待所有加载完成，才能开始绘制。/*/典型的错误代码var img1 = new Image(); img1.src = ;img1

3、.onload = function()ctx.drawImage(img1, x, y);var img2 = new Image(); img2.src = ; img2.onload = function()ctx.drawImage(img2, x, y);*/var progress = 0;/加载进度 0100var img1 = new Image();img1.src = ; img1.onload = function()progress += 80; if(progress=100)startDraw();var img2 = new Image(); img2.src =

4、 ; img2.onload = function()progress += 20; if(progress=100)startDraw();2.如何为Canvas 上的图形/图像绑定事件？难点网页只能为 DOM 元素绑定函数，Canvas 绘图技术中只要一个Canvas 元素，其它图形图像都不是元素无法进行事件绑定！解决办法：为Canvas 绑定能为规则的图形“绑定”函数，获取事件发生的坐标，是否处于目标图形/图像所在范围内只3.HTML5 新特性之五SVG 绘图Canvas 绘图SVG 绘图Adobe Photoshop：处理位图每幅图像由点(rgb)组成，描述颜色的细节变化，可用于等领域

5、放大后会出现马赛克失真。Adobe Illustrator：处理矢量图每幅图像由线条(需要指定方向、值)，可以无限缩放而不失真不描述颜色的细节变化。Scalable Vectraphiph，可缩放的矢量图，此技术在 2000 年就已经存在了，独立于网页的一门技术；HTML5 之后，纳入了 HTML5 标准SVG 技术的使用方法：(1)HTML5 之前的使用方法：库，并进行了一定的瘦身。SVG不属于 HTML4 或 XHTML，只能编写在独立的 XML 文件中，首先编写一个 SVG 文件（本质是一个 XML 文件），然后在 HTML 中使用IMG/IFRAME/OBJECT/EMBED 等引入.

6、svg 文件(2)HTML5 之后的使用方法H5 已经把SVG采纳：在 HTML 文件中直接使用 SVG 相关即可默认为 300*150 的 inline-block练习：(1)使用 SVG 矩形绘制一个国际象棋的棋盘使用 HTML 中的rect (2)使用 SVG 矩形绘制一个国际象棋的棋盘使用 JS 动态创建rect使用 SVG 绘制矩形注意：SVG 图形的样式可以用 HTML 属性赋值，也可以使用 CSS 形式，但不接受普通的CSS 属性！只能使用 SVG 元素的专有样式属性。(2)SVG 图形的属性不属于 HTMLDOM 标准， 只能使用DOM 方法操作其属性：rect.setribu

7、te(,)(3)使用 JS 动态创建 SVG 元素，1)用svg.innerHTML = 2)用.createElementNS(, )，不能使用.createElement()(4)SVG 元素的 nodeName 都是纯小写形式！与普通的 HTML 元素不同！练习：在 SVG 画布上绘制一个矩形，从左移动到右，同时填充颜色还在不停的随机改变根据如下的 JSON 数据，绘制柱状统计图有坑！label: 1 月, value: 350,label: 2 月, value: 300,label: 3 月, value: 450,label: 4 月, value: 380绘图类型位图矢量图缩放失

8、真不失真颜色细节丰富不够丰富应用领域、统计图、图标、地图内容JS 绘制每个图形都是事件绑定不方便方便5.使用 SVG 绘制圆形练习：(1)创建 30 个大小随机、颜色随机、随机的圆形提示：使用createElementNS()创建元素,se(2)点击某个圆形，其慢慢变大、变淡直至tribute()修改属性，从 DOM 树上删除该元素(3)实现“”效果，点击svg 画布的某处，即在此处生成一个圆形，立即变大、变淡.直至6.使用 SVG 绘制椭圆7.使用 SVG 绘制直线注意：所有的 SVG 图形默认只有填充色，没有描边色。练习：使用 line 创建如下的图标：提示：可以把多个元素放在一个小组中，可以自动继承小组的公共属性8.使用 SVG 绘制折线练习：使用折线绘制如下的图标9.使用 SVG 绘制多边形17:25练习：使用多边形绘制如下的图标：10.使用 SVG 绘制文本提示：传统的不能置于 SVG！同理，SVG 的也不能放在其它元素！文本内容11 .使用 SVG 绘制图像提示：在 SVG 中绘制图像使用 image 元素，引入位图后，此 SVG放大后会失真。12.如何使用渐变效果!-渐变属于特效，必须在“特效列表”-课后练习：1