老生常谈h5新特性3:(绘图)

老生常谈h5新特性3:(绘图)

在网页中绘图可以使用的功能：
(1)实时走势图
(2)统计图表
(3)随机内容的图片
(4)在线画图板
(5)HTML5游戏——2D/3D

可用的绘图技术：
(1)Canvas技术 —— 专用于绘制2D图形/图像
(2)SVG技术 —— 专用于绘制矢量图
(3)WebGL技术 —— 目前不是HTML5标准技术，功能最强大，3D图形/图像

HTML5引入了<canvas>标签用于绘图，默认是一个300*150的inline-block。使用width/height属性指定尺寸，但不能使用CSS样式指定宽和高！

  <canvas width="600" height="500" id=" "> 
    您的浏览器不支持Canvas标签！
  </canvas>

往“画布”上绘图需要使用其对应的“画笔”对象：
var ctx = c.getContext('2d'); //绘图上下文——“画笔”
接下来所有的绘图任务都由画笔实现。
Content：内容
Context：上下文

绘图上下文对象的常用属性——console.log(ctx)：
fillStyle：填充样式
strokeStyle：描边/轮廓样式
lineWidth：描边/轮廓的宽度
font：绘制文本所用的字号/字体
textBaseline：文本对齐的基线
showdowOffsetX：阴影水平偏移量
showdowOffsetY：阴影竖直偏移量
showdowColor：阴影颜色
showdowBlur：阴影模糊半径

提示：矩形的定位点在自己左上角
ctx.fillStyle = 填充颜色
ctx.strokeStyle = 描边颜色
ctx.fillRect(x,y,w,h) 填充一个矩形
ctx.strokeRect(x,y,w,h) 描边一个矩形
ctx.clearRect(x,y,w,h) 清除一个矩形范围内的所有内容

提示：文字的定位点默认在文本基线的起点(左侧)
ctx.textBaseline = 文本基线，可取为top/bottom/middle/alphabetic
ctx.fillText(txt, x, y) 填充文本
ctx.strokeText(txt, x, y) 描边文本
ctx.measureText(txt).width 测量，根据当前指定的字号和字体计算指定文本的宽度

ctx.shadowColor = //阴影颜色
ctx.shadowOffsetX =    //阴影偏移量
ctx.shadowOffsetY =
ctx.shadowBlur =//阴影模糊半径

//创建渐变对象
var g = ctx.createLinearGradient(xa,ya, xe,ye);
g.addColorStop( , );  //添加颜色点
g.addColorStop( , );  //添加颜色点
//使用渐变对象
ctx.fillStyle = g;
ctx.strokeStyle = g;

提示：Canvas中的路径概念与Photoshop中钢笔工具类似的。路径本身是不可见的，有三个用途：描边、填充(闭合)、裁剪(闭合)
Canavs中与路径绘制相关方法：
ctx.beginPath() //开始一条新路径
ctx.closePath() //闭合路径，让最后一个锚点自动连接到第一个锚点
ctx.moveTo(x, y) //移动到指定点
ctx.lineTo(x,y) //从当前点到指定点绘制直线路径
ctx.arc() //绘制拱形路径
ctx.ellipse() //绘制椭圆路径
ctx.bezierCurveTo() //绘制贝塞尔曲线路径
ctx.stroke() //绘制
ctx.fill() //填充
ctx.clip() //剪切

提示：图片的定位点在图片的左上角。客户端JS必须等待图片加载完成才能开始绘制。
var img = new Image();
img.src = 'x.jpg';
img.onload = function(){
//图片已经加载完成了
ctx.drawImage(img, x, y) //使用默认的宽高
ctx.drawImage(img, x, y, w, h)
}

var ctx = canvas.getContext('2d');
//可以将绘图上下文对象（即画笔对象）进行变形(transform)——与对Canvas施加CSS Transform样式不同，绘图上下文的变形只影响当前绘制的图形图像内容
ctx.translate(x,y) //坐标轴原点平移到指定点，所有点的坐标都发生改变
ctx.rotate(deg) //画笔旋转，则内容旋转，轴点在坐标轴原点
ctx.scale() //画笔缩放
ctx.save() //保存绘图上下文(画笔）当前的变形数据
ctx.restore() //恢复最近一次保存的画笔的变形相关的状态

提示：第三方的绘图工具非常多！直接百度“JS绘图工具”！
第三方工具的使用步骤(例子:chartjs)：
(1)打开官网，看工具介绍
http://www.chartjs.org
一款开源的、提供了8中图表的、基于Canvas、响应式图表绘制工具库。
(2)参考DEMO，编写示例程序
new Chart(canvasId, {
type: 'bar', //图表的类型，共8中
data: { }, //图表必需的数据
options: { } //可选项
});
(3)查看API Document，实现自己的项目需求
参考手册中的示例代码

多张图片绘制需要按照特定的顺序，而加载完成顺序是完全无法预测，只能等待所有图片加载完成，才能开始绘制。

  /*
  //典型的错误代码
  var img1 = new Image();
  img1.src = "";
  img1.onload = function(){
    ctx.drawImage(img1, x, y);
  }
  var img2 = new Image();
  img2.src = "";
  img2.onload = function(){
    ctx.drawImage(img2, x, y);
  }
*/

  var progress = 0;    //加载进度 0~100
  var img1 = new Image();
  img1.src = "";
  img1.onload = function(){
    progress += 80;
    if(progress===100){
        startDraw();
    }
  }
  var img2 = new Image();
  img2.src = "";
  img2.onload = function(){
    progress += 20;
    if(progress===100){
        startDraw();
    }
  }

网页只能为DOM元素绑定监听函数，Canvas绘图技术中只要一个Canvas元素，其它图形图像都不是元素——无法进行事件绑定！—— 解决办法：为Canvas绑定监听函数，获取事件发生的坐标，是否处于目标图形/图像所在范围内——只能为规则的图形“绑定”监听

Adobe Photoshop：处理位图——每幅图像由点(rgb)组成，善于描述颜色的细节变化，可用于照片等领域——放大后会出现马赛克失真。
Adobe Illustrator：处理矢量图——每幅图像由线条(需要指定方向、值)，可以无限缩放而不失真——不善于描述颜色的细节变化。

Scalable Vector Graphiph，可缩放的矢量图，此技术在2000年就已经存在了，独立于网页的一门技术；HTML5之后，纳入了HTML5标准标签库，并进行了一定的瘦身。
SVG技术的使用方法：
(1)HTML5之前的使用方法：
SVG标签不属于HTML4或XHTML标签，只能编写在独立的XML文件中，首先编写一个SVG文件（本质是一个XML文件），然后在HTML中使用IMG/IFRAME/OBJECT/EMBED等标签引入.svg文件
(2)HTML5之后的使用方法——H5已经把SVG标签采纳：
在HTML文件中直接使用SVG相关标签即可
<svg>默认为300*150的inline-block</svg>

<rect width="" height="" x="" y="" fill="" fill-opacity="" stroke="" stroke-width="" stroke-opacity=""></rect>

注意：
(1)SVG图形的样式可以用HTML属性赋值，也可以使用CSS形式，但不接受普通的CSS属性！只能使用SVG元素的专有样式属性。
(2)SVG图形的属性不属于HTMLDOM标准，只能使用核心DOM方法操作其属性： rect.setAttribute('','')
(3)使用JS动态创建SVG元素，1)用svg.innerHTML ='' 2)用document.createElementNS('', '')，不能使用document.createElement()
(4)SVG元素的nodeName都是纯小写形式！与普通的HTML元素不同！

<circle r="" cx="" cy=""></circle>

<ellipse rx="" ry="" cx="" cy=""></ellipse>

<line x1="" y1="" x2="" y2="" stroke=""></line>
注意：所有的SVG图形默认只有填充色，没有描边色。

<g></g>小组中，可以自动继承小组的公共属性

<polyline points="x1,y1 x2,y2 x3,y3 ....." stroke="" fill-opacity="0"></polyline>

<polygon points="x1,y1 x2,y2 ...."></polygon>

提示：传统的标签不能置于SVG内部！同理，SVG的标签也不能放在其它元素内部！
<text x="" y="" font-size="" alignment-baseline="before-edge">文本内容</text>

提示：在SVG中绘制图像使用image元素，引入位图后，此SVG图片放大后会失真。
<image width="" height="" xlink:href="x.jpg" x="" y=""></image>

<svg width="600" height="400" id=" ">
  <!--渐变属于特效，必须声明在“特效列表”-->
  <defs>
    <linearGradient id="g1" x1="0" y1="0" x2=" " y2=" ">
      <stop offset="0" stop-color=" "></stop>
      <stop offset="100%" stop-color=" "></stop>
    </linearGradient>
  </defs>
  <rect fill="url( )"></rect>
</svg>