查看: 2140|回复: 0

[DIV/CSS] H5的canvas绘图技术

发表于 2017-9-24 08:00:05
句号论坛

canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点。Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。

1.1 浏览器不兼容问题
  • ie9以上才支持canvas, 其他chrome、firefox、苹果浏览器等都支持
  • 只要浏览器兼容canvas,那么就会支持绝大部分api(个别最新api除外)
  • 移动端的兼容情况非常理想,基本上随便使用
  • 2d的支持的都非常好,3d(webgl)ie11才支持,其他都支持
  • 如果浏览器不兼容,最好进行友好提示,提示内容只有在浏览器不支持时才显示。
  1. //例如:
  2. <canvas id="cavsElem">
  3. 你的浏览器不支持canvas,请升级浏览器
  4. </canvas>
复制代码

浏览器不兼容,也可以使用flash等手段进行优雅降级

1.2 创建画布

在页面中创建canvas元素与创建其他元素一样,只需要添加一个标记即可。该元素默认的宽高为300*15,可以通过元素的width属性和height属性改变默认的宽高。

注意:

  • 不能使用CSS样式控制canvas元素的宽高,否则会导致绘制的图形拉伸。

  • 重新设置canvas标签的宽高属性会导致画布擦除所有的内容。

  • 可以给canvas画布设置背景色
1.3 canvas坐标系

在开始绘制任何图像之前,我们先讲一下canvas的坐标系。canvas坐标系是以左上角0,0处为坐标原点,水平方向为x轴,向右为正;垂直方向为y轴,向下为正。如下图所示:

1.4 绘制线径
  1. 获取上下文对象(CanvasRenderingContext2D)

首先,获取canvas元素,然后调用元素的getContext(“2d”)方法,该方法返回一个CanvasRenderingContext2D对象,使用该对象就可以在画布上绘图了。

  1. var mcanvas = document.getElementById("mcanvas");
  2. var mcontext = mcanvas.getContext("2d");
复制代码

  2.设置绘制起点(moveTo)

  1. //语法:
  2. ctx.moveTo(x, y);
复制代码

* 解释:设置上下文绘制路径的起点。相当于移动画笔到某个位置。

* 参数:x,y 都是相对于 canvas坐标系的原点(左上角)。

* 注意: 绘制线段前必须先设置起点,不然绘制无效。如果不进行设置,就会使用lineTo的坐标当作moveTo

3.绘制直线(lineTo)

  1. //语法:
  2. ctx.lineTo(x, y);
复制代码

* 解释:从上一步设置的绘制起点绘制一条直线到(x, y)点。

* 参数:x,y 目标点坐标。

4.路径的开始和闭合

  1. //开始路径:
  2. ctx.beginPath();
  3. //闭合路径:
  4. ctx.closePath();
复制代码

* 解释:如果绘制路径比较复杂,必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。

* beginPath: 核心的作用是将不同绘制的形状进行隔离,每次执行此方法,表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

5.绘制图形(stroke)

  1. //语法:
  2. ctx.stroke();
复制代码

* 解释:根据路径绘制线。路径只是草稿,真正绘制线必须执行stroke

在绘制之前,还可以对画笔的颜色和粗细进行设置进行设置,方法如下:

  1. //语法:
  2. ctx.strokeStyle = “#ff0000”;
  3. ctx.lineWidth = 4; //值为不带单位的数字,并且大于0
复制代码

6.填充图形(fill)

  1. //语法:
  2. ctx.fill();
复制代码

* 解释:对已经画好的图形进行填充颜色。

在填充之前,同样可以对所填充的颜色进行设置,方法如下:

  1. //语法:
  2. ctx.fileStyle = “#0000ff”;
复制代码

7.canvas绘制的基本步骤:

第一步:获得上下文 =>canvasElem.getContext('2d');

第二步:开始路径规划 =>ctx.beginPath()

第三步:移动起始点 =>ctx.moveTo(x, y)

第四步:绘制线(线条、矩形、圆形、图片...) =>ctx.lineTo(x, y)

第五步:闭合路径 =>ctx.closePath();

第六步:绘制描边 =>ctx.stroke();

案例:通过上面所学的方法绘制一个三角形。

  1. <canvas id="mcanvas">你的浏览器不支持canvas,请升级浏览器</canvas>
  2. <script>
  3. var mcanvas = document.getElementById("mcanvas"); //获得画布
  4. var mcontext = mcanvas.getContext("2d"); //获得上下文
  5. mcanvas.width = 900; //重新设置标签的属性宽高
  6. mcanvas.height = 600; //千万不要用 canvas.style.height
  7. mcanvas.style.border = "1px solid #000"; //设置canvas的边
  8. //绘制三角形
  9. mcontext.beginPath(); //开始路径
  10. mcontext.moveTo(100,100); //三角形,左顶点
  11. mcontext.lineTo(300, 100); //右顶点
  12. mcontext.lineTo(300, 300); //底部的点
  13. mcontext.closePath(); //结束路径
  14. mcontext.stroke(); //描边路径
  15. </script>
复制代码

案例:理解canvas基于状态的绘图

  1. <canvas id="mcanvas">你的浏览器不支持canvas,请升级浏览器</canvas>
  2. <script>
  3. var mcanvas = document.getElementById("mcanvas"); //获得画布
  4. var mcontext = mcanvas.getContext("2d"); //获得上下文
复制代码

  1. mcanvas.width = 900; //重新设置标签的属性宽高
  2. mcanvas.height = 600; //千万不要用 canvas.style.height
  3. mcanvas.style.border = "1px solid #000"; //设置canvas的边
  4. mcontext.strokeStyle = "#ff0000"; //设置画笔的颜色
  5. mcontext.lineWidth = 2; //设置画笔的粗细
  6. mcontext.fillStyle = "#00ff00"; //设置填充图形的颜色
  7. //绘制三角形
  8. mcontext.beginPath(); //开始路径
  9. mcontext.moveTo(100,100); //三角形,左顶点
  10. mcontext.lineTo(300, 100); //右顶点
  11. mcontext.lineTo(300, 300); //底部的点
  12. mcontext.closePath(); //结束路径
  13. mcontext.stroke(); //描边路径
  14. //mcontext.fill(); //填充图形
  15. //绘制矩形
  16. mcontext.beginPath(); //开启了一个新状态(新线径),
  17. //新状态可以继承之前状态的样式,
  18. //但是当前状态设置的所有样式只能用于当前状态。
  19. //mcontext.strokeStyle = "#00ff00";//为当前状态设置的样式
  20. mcontext.moveTo(500,100); //起始点
  21. mcontext.lineTo(800,100); //上边
  22. mcontext.lineTo(800,300); //右边
  23. mcontext.lineTo(500,300); //下边
  24. mcontext.closePath();
  25. mcontext.stroke();
复制代码
1.5 绘制矩形
  1. 快速创建矩形rect()方法

  1. 语法:ctx.rect(x, y, width, height);
复制代码

* 解释:x, y是矩形左上角坐标, width和height都是以像素计

* rect方法只是规划了矩形的路径,并没有填充和描边。

2.创建描边矩形

  1. 语法:ctx.strokeRect(x, y, width, height);
复制代码

参数跟rect(x, y, width, height)相同,注意此方法绘制完路径后立即进行stroke绘制。

3.创建填充矩形

  1. 语法:ctx.fillRect(x, y, width, height);
复制代码

参数跟rect(x, y, width, height)相同, 此方法执行完成后,立即对当前矩形进行fill填充。

4.清除矩形(clearReact)

  1. 语法:ctx.clearRect(x, y, width, hegiht);
复制代码

* 解释:清除某个矩形内的绘制的内容,相当于橡皮擦。

  1. <canvas id="mcanvas">你的浏览器不支持canvas,请升级浏览器</canvas>
  2. <script>
  3. var mcanvas = document.getElementById("mcanvas"); //获得画布
  4. var mcontext = mcanvas.getContext("2d"); //获得上下文
  5. mcanvas.width = 900; //重新设置标签的属性宽高
  6. mcanvas.height = 600; //千万不要用 canvas.style.height
  7. //rect方法只是规划了矩形的路径,并没有填充和描边,需要单独描边或填充。
  8. mcontext.rect(20,20,300,200);
  9. mcontext.stroke();
  10. //快速创建一个描边的矩形
  11. mcontext.strokeRect(400,20,300,200);
  12. //快速创建一个填充的矩形
  13. mcontext.fillRect(20,300,300,200);
  14. //在画布上创建一个矩形区域,该矩形区域中的图形都会被清除
  15. mcontext.clearRect(120,350,100,100);
  16. </script>
复制代码
1.6 绘制圆形

arc() 方法用于创建弧线(用于创建圆或部分圆)。

  1. 语法:ctx.arc(x, y, r, startAngle, endAngle, counterclockwise);
复制代码

  1. 解释:
  2. x,y:圆心坐标。
  3. r:半径大小。
  4. sAngle:绘制开始的角度。 圆心到最右边点是0度,顺时针方向弧度增大。
  5. eAngel:结束的角度,注意是弧度。
  6. counterclockwise:是否是逆时针,默认是false。true是逆时针,false:顺时针
  7. 注意:弧度和角度的转换公式: rad = deg*Math.PI/180;
复制代码

绘制圆形和饼图

  1. <canvas id="mcanvas">你的浏览器不支持canvas,请升级浏览器</canvas>
  2. <script>
  3. var mcanvas = document.getElementById("mcanvas"); //获得画布
  4. var mcontext = mcanvas.getContext("2d"); //获得上下文
  5. mcanvas.width = 900;
  6. mcanvas.height = 600;
  7. //绘制圆形
  8. mcontext.beginPath();
  9. mcontext.arc(200,200,100,0,360*Math.PI/180);
  10. mcontext.closePath();
  11. mcontext.stroke();
  12. // 通过数据进行绘制饼图
  13. var data = [{
  14. "value": .2,
  15. "color": "red",
  16. "title": "应届生"
  17. },{
  18. "value": .3,
  19. "color": "blue",
  20. "title": "社会招生"
  21. },{
  22. "value": .4,
  23. "color": "green",
  24. "title": "老学员推荐"
  25. },{
  26. "value": .1,
  27. "color": "#ccc",
  28. "title": "公开课"
  29. }];
  30. var tempAngle = -90;
  31. var x0 = 600, y0 = 300;
  32. var raduis = 200;
  33. for(var i = 0; i < data.length; i++) {
  34. mcontext.beginPath();
  35. mcontext.moveTo(x0, y0);
  36. var angle = data[i].value * 360;
  37. var startAngle = tempAngle*Math.PI/180;
  38. var endAngle = (tempAngle+angle)*Math.PI/180;
  39. mcontext.fillStyle = data[i].color;
  40. mcontext.arc(x0, y0, raduis, startAngle, endAngle);
  41. mcontext.closePath();
  42. mcontext.fill();
  43. tempAngle += angle;
  44. }
  45. </script>
复制代码

三角函数的补充:

Math.sin(弧度); //夹角对面的边 和 斜边的比值

Math.cos(弧度); //夹角侧边与斜边的比值

圆形上面的点的坐标的计算公式

x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标

y =y0 + Math.sin(rad) * R;//注意都是弧度

1.7 绘制文字

canvas 提供了两种方法来渲染文本:

  1. fillText(text, x, y [, maxWidth])
复制代码

在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.

  1. strokeText(text, x, y [, maxWidth])
复制代码

在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.

示例1

文本用当前的填充方式被填充:

  1. var ctx = document.getElementById('canvas').getContext('2d');
  2. ctx.font = "48px serif";
  3. ctx.fillText("Hello world", 10, 50);
复制代码

示例2

文本用当前的边框样式被绘制:

  1. var ctx = document.getElementById('canvas').getContext('2d');
  2. ctx.font = "48px serif";
  3. ctx.strokeText("Hello world", 10, 50);
复制代码

文本样式

font = value: 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。

textAlign = value: 文本对齐选项. 可选的值包括:start, end, left, right or center. 默认值是 start。

textBaseline = value: 基线对齐选项. 可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

代码示例:

  1. <canvas id="mcanvas">你的浏览器不支持canvas,请升级浏览器</canvas>
  2. <script>
  3. var mcanvas = document.getElementById("mcanvas"); //获得画布
  4. var mcontext = mcanvas.getContext("2d"); //获得上下文
  5. mcanvas.width = 900;
  6. mcanvas.height = 600;
  7. mcontext.fillStyle = "#0000ff";
  8. mcontext.font = "italic 30px 微软雅黑";
  9. mcontext.textAlign = "start";
  10. mcontext.textBaseline = "top";
  11. mcontext.fillText("你好", 200, 0, 100);
  12. mcontext.font = "italic 30px 微软雅黑";
  13. mcontext.textAlign = "left";
  14. mcontext.textBaseline = "top";
  15. mcontext.fillText("你好", 200, 50, 100);
  16. mcontext.font = "bold 30px 黑体";
  17. mcontext.textAlign = "center";
  18. mcontext.textBaseline = "top";
  19. mcontext.strokeText("你好", 200, 100, 100);
  20. mcontext.font = "bold 30px 黑体";
  21. mcontext.textAlign = "right";
  22. mcontext.textBaseline = "top";
  23. mcontext.strokeText("你好", 200, 150, 100);
  24. mcontext.font = "bold 30px 黑体";
  25. mcontext.textAlign = "end";
  26. mcontext.textBaseline = "top";
  27. mcontext.strokeText("你好", 200, 200, 100);
  28. </script>
复制代码
1.8绘制图像 1.基本绘制图片的方式

  1. context.drawImage(img,x,y);
复制代码

参数说明: x,y 绘制图片左上角的坐标, img是绘制图片的dom对象。

2.在画布上绘制图像,并规定图像的宽度和高度

  1. context.drawImage(img,x,y,width,height);
复制代码

参数说明:width 绘制图片的宽度, height:绘制图片的高度

如果指定宽高,最好成比例,不然图片会被拉伸

  1. 设置高 = 原高度 * 设置宽/ 原宽度;
复制代码

3.图片裁剪,并在画布上定位被裁剪的部分

  1. context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
复制代码

参数说明:

sx,sy 裁剪的左上角坐标,

swidth:裁剪图片的高度。 sheight:裁剪的高度

其他同上

4.用javascript创建img对象

上面提供的3个方法,都需要一个Image对象作为参数,下面介绍了几种创建Image对象的方式。需要注意的是,为Image的src属性赋值后,Image对象会去装载指定图片,但这种装载是异步的,如果图片太大或则图片来自网络,且网络传输速度慢,Image对象装载图片就会需要:一定的时间开销。为了保证图片装载完成后才去绘制图片,可以监听Image对象的onload回调事件,然后在事件处理函数中绘制图片,如下所示:

第一种方式:

  1. var img = document.getElementById("imgId");
  2.     img.onload = function(){ //图片加载完成后,执行此方法
  3.    mcontext.drawImage(img, 10, 10);
  4. }
复制代码

第二种方式:

  1. var img = document.createElement("img");
  2. img.src = "img/a.jpg";
  3. img.alt = "谁笑谁是小狗";
  4. img.onload = function(){ //图片加载完成后,执行此方法
  5. mcontext.drawImage(img, 10, 10);
  6. }
复制代码

第三种方式:

  1. var img = new Image();//这个就是 img标签的dom对象
  2. img.src = "imgs/arc.gif";
  3. img.alt = "谁笑谁是小狗";
  4. img.onload = function() { //图片加载完成后,执行此方法
  5. }
复制代码



太阳http代理AD
回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条