canv的基本语法

可用的绘图技术：

  (1)Canvas技术 —— 专用于绘制2D图形/图像

  (2)SVG技术 —— 专用于绘制矢量图

  (3)WebGL技术 —— 目前不是HTML5标准技术，功能最强大，3D图形/图像

 

1.Canvas绘图技术 —— 最重要&难点

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

       您的浏览器不支持Canvas标签！

</canvas>

往“画布”上绘图需要使用其对应的“画笔”对象：

var ctx = c.getContext('2d');  //绘图上下文——“画笔”

接下来所有的绘图任务都由画笔实现。

Content：内容

Context：上下文

 

绘图上下文对象的常用属性——console.log(ctx)：

fillStyle：'#000'，填充样式

  strokeStyle：'#000'，描边/轮廓样式

lineWidth：1，描边/轮廓的宽度

font：'10px sans-serif'，绘制文本所用的字号/字体

textBaseline：'alphabetic'，文本对齐的基线

showdowOffsetX：0，阴影水平偏移量

showdowOffsetY：0，阴影竖直偏移量

showdowColor：'rgba(0,0,0,0)'，阴影颜色

  showdowBlur：0，阴影模糊半径

 2.使用Canvas绘制矩形

  提示：矩形的定位点在自己左上角

 ctx.fillStyle = '#000'            填充颜色

ctx.strokeStyle = '#000' 描边颜色

 ctx.fillRect(x,y,w,h)        填充一个矩形

ctx.strokeRect(x,y,w,h)          描边一个矩形

ctx.clearRect(x,y,w,h)             清除一个矩形范围内的所有内容

3.使用Canvas绘制文本

  提示：文字的定位点默认在文本基线的起点(左侧)

 ctx.textBaseline = 'alphabetic'   文本基线，可取为top/bottom/middle/alphabetic

ctx.fillText(txt, x, y)        填充文本

 ctx.strokeText(txt, x, y)        描边文本

ctx.measureText(txt).width    测量，根据当前指定的字号和字体计算指定文本的宽度

4.使用Canvas绘制路径(Path)

  提示：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()

5.使用Canvas绘制图像

  提示：图片的定位点在图片的左上角。客户端JS必须等待图片加载完成才能开始绘制。

var img = new Image();

  img.src = 'x.jpg';

  img.onload = function(){

       //图片已经加载完成了

       ctx.drawImage(img, x, y)   //使用默认的宽高

       ctx.drawImage(img, x, y, w, h)

  }

小结：Canvas绘图可以绘制的内容：

(1)矩形： ctx.fillRect()   ctx.strokeRect()   ctx.clearRect()

(2)文本： ctx.fillText()   ctx.strokeText()   ctx.measureText()

(3)路径 - 描边/填充/裁剪

   ctx.beginPath()   ctx.closePath()

   ctx.moveTo()   ctx.lineTo()   ctx.arc()

   ctx.stroke()  ctx.fill()   ctx.clip()

(4)图像：  ctx.drawImage()

绘图上下文的状态改变和恢复 —— 难点&晦涩

  var ctx = canvas.getContext('2d');

  //可以将绘图上下文对象（即画笔对象）进行变形(transform)——与对Canvas施加CSS Transform样式不同，绘图上下文的变形只影响当前绘制的图形图像内容

ctx.translate(x,y)    //坐标轴原点平移到指定点，所有点的坐标都发生改变

 ctx.rotate(deg)     //画笔旋转，则内容旋转，轴点在坐标轴原点

 ctx.scale()            //画笔缩放

  ====================

ctx.save()        //保存绘图上下文(画笔）当前的变形数据

  ctx.restore()              //恢复最近一次保存的画笔的变形相关的状态

相关知识点主意事项

 

1.如何等待所有图片加载完成后，才开始绘图？

 

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

 

  /***************************

 

//典型的错误代码

 

  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();

 

       }

 

  }

 

 

 

 

 

2.如何为Canvas上的图形/图像绑定事件监听？——难点

 

  网页只能为DOM元素绑定监听函数，Canvas绘图技术中只要一个Canvas元素，其它图形图像都不是元素——无法进行事件绑定！——

 

解决办法：为Canvas绑定监听函数，获取事件发生的坐标，是否处于目标图形/图像所在范围内——只能为规则的图形“绑定”监听

 

 

 

 

 

 

 

Adobe Photoshop：处理位图——每幅图像由点(rgb)组成，善于描述颜色的细节变化，可用于照片等领域——放大后会出现马赛克失真。

Adobe Illustrator：处理矢量图——每幅图像由线条(需要指定方向、值)，可以无限缩放而不失真——不善于描述颜色的细节变化。