6分钟入门Canvas绘图

2018年1月27日21:07:59 发表评论 13

在HTML5中,无疑最受欢迎的就是Canvas元素。这个元素相当于在页面中的一张画布,我们利用Javascript动态的在这张画布上绘制图形。<canvas>元素最早是由苹果公司推出的,后来很多主流浏览器才慢慢的支持它,canvas是由几级API构成的,支持2D和WebGL 3D绘图。下面一起来快速上手canvas吧。

6分钟入门Canvas绘图

一、canvas基本用法

要想使用canvas,首先得设置其width和height属性,指定绘图的区域大小。可以在<canvas>元素中加入说明,如果当前浏览器不支持canvas,就会显示说明:

  1. <canvas id="canvas" width="500" height="500">当前浏览器不支持canvas</canvas>

写好HTML部分,我们接下来写JS部分,首先我们得选取canvas元素,然后判断浏览器是否支持<canvas>元素,支持的话我们调用getContext()方法传入2d就可以取得2d上下文对象:

  1. var dom = document.getElementById('canvas');
  2. if(dom.getContext) {
  3.     var context = dom.getContext("2d");
  4.     // 在这里写代码
  5. }

二、绘制矩形

矩形是唯一一种可以直接在2D上下文中绘制的形状,filRect()、strokeRect()和clearRect()这三个是和矩形有关的方法,都可以接收4个参数,矩形的x坐标、y坐标、宽度和高度,单位都是像素。

下面这段代码中用到了canvas中的填充(fillStyle)和描边(strokeStyle),分别介绍了与矩形有关的三个属性的方法。

  1. // 绘制红色矩形
  2. context.fillStyle = "#ff0000";
  3. context.fillRect(10, 10, 50, 50);
  4. // 绘制黄色描边的矩形
  5. context.strokeStyle = "yellow";
  6. context.strokeRect(20, 20, 50, 50);
  7. // 在两个矩形重叠处清除一个小矩形
  8. context.clearRect(30, 30, 10, 10);

三、绘制路径

canvas支持很多 在画布上绘制路径的方法,通过路径我们可以创造出更加复杂的线条和形状,要想绘制路径,首先必须调用beginPath()方法,表示路径绘制开始,下面是一些绘制路径的方法:

  • arc(x, y, radius, startAngle, endAngle, false):这个方法有6个参数,以x/y为圆心的坐标绘制一条弧线,弧线的半径为radius,起始和结束角度是startAngle和endAngle,最后一个参数是表示是否按逆时针方向计算,false表示按顺时针方向计算。
  • arcTo(x1, y1, x2, y2, radius):从上一点开始绘制一条弧线,到(x2, y2)为止,并且以给定的半径radius穿过(x1, y2)。
  • bezierCurveTo(c1x, c1y, c2x, c2y, x, y):从上一点开始绘制一条曲线到(x, y)为止,并且以(x1x, x1y)和(x2x, x2y)为控制点
  • lineTo(x, y):从上一点开始绘制一条直线,到x/y为止。
  • moveTo(x, y):将绘图游标移动到x/y,不画线
  • quadraticCurveTo(cx, cy, x, y):从上一点开始绘制一条干净曲线,到x/y为止,并且以cx/cy为控制点。
  • rect(x, y, width, height):从点x/y开始绘制一个矩形,这个方法是绘制矩形路径,不是绘制独立的形状。

通过上面的方法绘制路径后,我们要调用closePath()闭合路径,如果你想填充路径,可以调用fill()方法,当然也可以调用stroke()方法对路径描边,调用clip()方法可以在路径上创建一个剪切区域。

  1. // 绘制一个时钟,开始:
  2. context.beginPath();
  3. // 绘制外圆
  4. context.arc(100, 100, 99, 0, 2*Math.PI, false);
  5. // 绘制内圆
  6. context.moveTo(194, 100);
  7. context.arc(100, 100, 99, 0, 2*Math.PI, false);
  8. // 绘制分针
  9. context.moveTo(100, 100);
  10. context.lineTo(100, 15);
  11. // 绘制时针
  12. context.moveTo(100, 100);
  13. context.lineTo(35, 100);
  14. // 描边路径
  15. context.stroke();

四、绘制文本

在canvas2D绘制中,我们是使用fillText()和strokeText()这两个方法来绘制文本,这两个方法都接收4个参数,分别是要绘制的文本字符患上 ,x坐标,y坐标和可选参数最大像素宽度,以下面3个属性为基础。

  1. font:表示字体样式,大小及字体
  2. textAlign:表示文本对齐方式
  3. textBaseline:表示文本的基线

这3个属性都有默认值,没有特殊情况,我们一般不用设置它们。

  1. context.font = "bold 14px Arial";
  2. context.textAlign = "center";
  3. context.gextBaseline = "middle";
  4. context.fillText("12", 100, 20);

五、变换

我们可以通过变换来处理画布上的图像,和css3动画属性是一样的,支持,旋转(rotate())、绽放(scale())、位移(translate(x, y))还有两个是transform(修改变换矩阵)和setTransform(重置矩阵)。

六、绘制图像

我们可以把任何一幅图像绘制到canvas画布上,使用drawImage()方法,有三个参数,最简单的调用方法是传入一个HTML<img>元素,以及绘制图像的起点x/y坐标,例如:

  1. var image = document.images[0];
  2. context.drawImage(image, 10, 10);

这两行代码取得文档中第一幅图像,将它绘制到上下文中,起点为10,10.

如果你想让图像的某个区域绘制到画布中,drawImage()就需要传入9个参数:依次是绘制的图像、源图像x坐标、y坐标、源图像宽度、高度、目标图像x坐标、y坐标、目标图像宽度、高度,如:

  1. context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60)

七、设置阴影/渐变/重复/合成

通过下面这几个属性可以为形状或路径绘制阴影

  • shadowColor:表示阴影颜色
  • shadowOffsetX:表示形状或路径在x轴方向 阴影偏移量
  • shadowOffsetY:表示形状或路径在Y轴方向 阴影偏移量
  • shadowBlur:表示模糊的像素数,默认0为不模糊

设置渐变可以调用createLinearGradient()方法,接收4个参数:起点x坐标、起点y坐标、终点x坐标、终点y坐标。调用这个方法后会创建一个指定大小 的渐变,并返回一个CanvasGradient对象实例。

  1. // gradient是一个从画布坐标30,30到70,70白色到黑色的渐变
  2. var gradient = context.createLinearGradient(30, 30, 70, 70);
  3. gradient.addColorStop(0, "white");
  4. gradient.addColorStop(1, "black");
  5. context.fillStyle = gradient;
  6. context.fillRect(30, 30, 70, 70);

模式就是重复的图像,可以用来填充或描边,调用createPattern()方法并传入两个参数就可以创建一个新模式:一个HTML<img>元素和一个表示如何重复图像的字符串(也就是css中background-repeat的属性值,包括“repeat"/"repeat-x"/"repeat-y"和"no-repeat")

合成:还有两个可以用到2D上下文绘制操作的属性,globalAlpha和globalCompostion-Operation。globalAlpha看名字也知道是设置透明度属性的,而globalCompostion-Operation是表示绘制的图形怎样与先绘制的图形结合(也就是合成),可能的值如下:

  • source-over:后绘制的图形位于先绘制的图形上方
  • source-in:后绘制的图形与先绘制的图形重叠部分可见,两者其他部分完全透明
  • source-out:后绘制的图形与先绘制的图形不重叠部分可见,先绘制的图形完全透明
  • source-atop:后绘制的图形与先绘制的图形重叠部分可见,先绘制的图形不受影响
  • destination-over:后绘制的图形位于先绘制的图形下方,只有之前透明像素下的部分可见
  • destination-in:后绘制的图形位于先绘制的图形下方,两者不重叠部分完全透明
  • destination-out:后绘制的图形擦除与先绘制的图形重叠的部分
  • destination-atop:后绘制的图形位于先绘制的图形下方,在两者不重叠的地方,先绘制的图形会变透明。
  • lighter:后绘制的图形与先绘制的图形重叠部分的值相加,使该部分变亮。
  • copy:后绘制的图形完全替代与之重叠的先绘制的图形
  • xor:后绘制的图形与先绘制的图形重叠的部分执行“异或”操作

 

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: