canvas图片绘制及常用svg精解 浓缩版

canvas图片绘制及常用svg精解 浓缩版

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 id="" width="" height="">

    svg 画布

    <rect  width="" height="" x="" y=""

    fill="" stroke="" fill-opacity="" stroke-opacity=""

    stroke-width=""></rect>

  </svg>

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 = "<rect></rect>";

  svg.innerHTML = html;

  #dom元素创建

  var rect =

  document.createElementNS("http://www.w3.org/2000/svg",

    "标签名");

  svg.appendChild(rect);