canvas属于客户端技术,图片在服务器中,所有浏览器必须先下载
要绘制图片,且等待图片异步加载成功后绘制.
1:创建图片对象 var p3 = new Image();
2:下载图片 p3.src = "x.png";
3:绑定事件 onload p3.onload = function(){} 图片下载成功
4:绘制图片 ctx.drawImage(p3,x,y); 原始大小绘图
ctx.drawImage(p3,x,y,w,h); 拉抻绘图
html5新特性--canvas[变形操作]
ctx.rotate(弧度); 旋转画笔对象，轴点为画布的原点
ctx.translate(x,y); 将整个画布的原点平移到指定点
ctx.save(); 保存画笔当前所有状态(角度/原点/颜色)<存盘>
ctx.restore(); 恢复画笔状态到最近一次保存中 <读取存盘>
3.3:html5新特性--svg
位图:由一个又一个像素组成,每个点各有自己的颜色，色彩细腻,但是放大失真.
矢量图:由一个又一个线条组成,每个线条指定颜色，方向，可以无限缩放，但是细节不够丰富
SVG(可缩放的矢量图)
canvas：2d位图，js代码绘图，事件只能绑定画布，适用于游戏
svg：2d矢量图，标签，事件可以绑定到元素
类型，地图应用
SVG 技术诞生2000年,早期作为XML的扩展,H5把常用SVG标签
采纳为标准，但有一些废弃.
html-->xml ->html5
3.4:html5新特性--svg--矩形
svg 画布
fill="" stroke="" fill-opacity="" stroke-opacity="" stroke-width=""> svg绘图特点--着重注意 (1)所有图形默认只有填充色(黑色)没有描边色 (2)svg图形的样式可以用元素属性方式声明,也可以使用css 声明,只能使用svg专用样式，不能使用CSS样式, 如边框设置只能 stroke,不能用border (3)图形可以使用JS来对属性赋值,但不能用html dom只能用 核心dom r.x = 10 r.width = 100; 无效 r.setAttribute("x",10); r.setAttibute("width":100); 有效 (4)动态添加svg图形 #html 字符串拼 var html = " svg.innerHTML = html; #dom元素创建 var rect = document.createElementNS("http://www.w3.org/2000/svg", "标签名"); svg.appendChild(rect);