JavaScript高级程序设计学习笔记第十五章--使用Canvas绘图

一.基本用法

1.要使用<canvas>元素,必须先设置其 width 和 height 属性,指定可以绘图的区域大小。能通过 CSS 为该元素添加样式,如果不添加任何样式或者不绘制任何图形,在页面中是看不到该元素的。

2.要在这块画布(canvas)上绘图,需要取得绘图上下文。而取得绘图上下文对象的引用,需要调用getContext()方法并传入上下文的名字。在使用<canvas>元素之前,首先要检测 getContext()方法是否存在,这一步非常重要。检测可以用如下方法进行:

1 var drawing = document.getElementById("drawing");
2 //确定浏览器支持<canvas>元素
3 if (drawing.getContext){
4 var context = drawing.getContext("2d");
5 //更多代码
6 }

 

3.使用 toDataURL()方法,可以导出在<canvas>元素上绘制的图像。这个方法接受一个参数,即图像的 MIME 类型格式,而且适合用于创建图像的任何上下文。例如:

 1 var drawing = document.getElementById("drawing");
 2 //确定浏览器支持<canvas>元素
 3 if (drawing.getContext){
 4 //取得图像的数据 URI
 5 var imgURI = drawing.toDataURL("image/png");
 6 //显示图像
 7 var image = document.createElement("img");
 8 image.src = imgURI;
 9 document.body.appendChild(image);
10 }

 

二.2D上下文:

1.使用 2D 绘图上下文提供的方法,可以绘制简单的 2D 图形,比如矩形、弧线和路径。

 

2.2D 上下文的坐标开始于<canvas>元素的左上角,原点坐标是(0,0)。所有坐标值都基于这个原点计算, x 值越大表示越靠右, 值越大表示越靠下。

3.填充与描边:

2D 上下文的两种基本绘图操作是填充和描边。这两个操作的结果取决于两个属性: fillStyle 和 strokeStyle。这两个属性的值可以是字符串、渐变对象或模式对象,而且它们的默认值都是"#000000"。如果为它们指定表示颜色的字符串值,可以使用 CSS 中指定颜色值的任何格式,包括颜色名、十六进制码、rgb、 rgba、 hsl 或 hsla。例如:

1 var drawing = document.getElementById("drawing");
2 //确定浏览器支持<canvas>元素
3 if (drawing.getContext){
4 var context = drawing.getContext("2d");
5 context.strokeStyle = "red";
6 context.fillStyle = "#0000ff";
7 }

 

4.绘制矩形:

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

fillRect():该方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过 fillStyle 属性指定。用法如下:

1 //绘制红色矩形
2 context.fillStyle = "#ff0000";
3 context.fillRect(10, 10, 50, 50);

strokeRect():该方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过 strokeStyle 属性指定。用法如下:

1 //绘制红色描边矩形
2 context.strokeStyle = "#ff0000";
3 context.strokeRect(10, 10, 50, 50);

clearRect():该方法用于清除画布上的矩形区域。本质上,这个方法可以把绘制上下文中的某一矩形区域变透明。

5.绘制路径:

要绘制路径,首先必须调用 beginPath()方法,表示要开始绘制新路径。然后,再通过调用下列方法来实际地绘制路径。

  • arc(x, y, radius, startAngle, endAngle, counterclockwise):以(x,y)为圆心绘制一条弧线,弧线半径为 radius,起始和结束角度(用弧度表示)分别为 startAngle 和
    endAngle。最后一个参数表示 startAngle 和 endAngle 是否按逆时针方向计算,值为 false表示按顺时针方向计算。
  • arcTo(x1, y1, x2, y2, radius):从上一点开始绘制一条弧线,到(x2,y2)为止,并且以给定的半径 radius 穿过(x1,y1)。
  • bezierCurveTo(c1x, c1y, c2x, c2y, x, y):从上一点开始绘制一条曲线,到(x,y)为止,并且以(c1x,c1y)和(c2x,c2y)为控制点。
  • 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)开始绘制一个矩形,宽度和高度分别由 width 和height 指定。这个方法绘制的是矩形路径,而不是 strokeRect()和 fillRect()所绘制的独立的形状。
  • closePath():在创建路径之后,想绘制一条连接到路径起点的线条。
  • fill():如果路径已经完成,你想用 fillStyle 填充它,可以调用 fill()方法。
  • stroke():对路径进行描边,颜色使用 strokeStyle属性
  • clip():在路径上创建一个剪切区域
  • isPointInPath():接收 x y 坐标作为参数,用于在路径被关闭之前确定画布上的某一点是否位于路径上

6.绘制文本:

绘制文本主要有两个方法: fillText()和 strokeText()。fillText()方法使用fillStyle 属性绘制文本,而 strokeText()方法使用 strokeStyle 属性为文本描边。这两个方法都可以接收 4 个参数:要绘制的文本字符串、 坐标、 坐标和可选的最大像素宽度。而且,这两个方法都以下列 3 个属性为基础:

  • font:表示文本样式、大小及字体,用 CSS 中指定字体的格式来指定,例如"10px Arial"。
  • textAlign:表示文本对齐方式。可能的值有"start"、"end"、"left"、"right"和"center"。建议使用"start"和"end",不要使用"left"和"right"。
  • textBaseline:表示文本的基线。可能的值有"top"、"hanging"、"middle"、"alphabetic"、"ideographic"和"bottom"。

7.变换:可以通过如下方法来修改变换矩阵。

  • rotate(angle):围绕原点旋转图像 angle 弧度。
  • scale(scaleX, scaleY):缩放图像,在 x 方向乘以 scaleX,在 y 方向乘以 scaleY。 scaleX和 scaleY 的默认值都是 1.0。
  • translate(x, y):将坐标原点移动到(x,y)。执行这个变换之后, 坐标(0,0)会变成之前由(x,y)表示的点。
  • transform(m1_1, m1_2, m2_1, m2_2, dx, dy):直接修改变换矩阵,方式是乘以如下矩阵。
  • setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy):将变换矩阵重置为默认状态,然后再调用 transform()。
  • save():保存上下文状态

8.绘制图像:

drawImage()函数:总共需要传入 9 个参数:要绘制的图像、源图像的 x 坐标、源图像的 y 坐标、源图像的宽度、源图像的高度、目标图像的 坐标、目标图像的 坐标、目标图像的宽度、目标图像的高度。这样调用drawImage()方法可以获得最多的控制。例如: context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60); 


9.阴影:有以下几个属性

  • shadowColor:用 CSS 颜色格式表示的阴影颜色,默认为黑色。
  • shadowOffsetX:形状或路径 x 轴方向的阴影偏移量,默认为 0。
  • shadowOffsetY:形状或路径 y 轴方向的阴影偏移量,默认为 0。
  • shadowBlur:模糊的像素数,默认 0,即不模糊。

10.渐变:渐变由 CanvasGradient 实例表示,很容易通过 2D 上下文来创建和修改。

createLinearGradient():创建一个新渐变,这个方法接收 4 个参数:起点的 x 坐标、起点的 y 坐标、终点的 坐标、终点的 坐标。调用这个方法后,它就会创建一个指定大小的渐变,并返回CanvasGradient 对象的实例。创建了渐变对象后,下一步就是使用 addColorStop()方法来指定色标。这个方法接收两个参数:色标位置和 CSS 颜色值。色标位置是一个 0(开始的颜色)到 1(结束的颜色)之间的数字。例如:

1 var gradient = context.createLinearGradient(30, 30, 70, 70);
2 gradient.addColorStop(0, "white");
3 gradient.addColorStop(1, "black");

createRadialGradient():创建径向渐变(或放射渐变),该方法接收 6 个参数,对应着两个圆的圆心和半径。前三个参数指定的是起点圆的原心(x y)及半径,后三个参数指
定的是终点圆的原心(x y)及半径。

11.模式:模式其实就是重复的图像,可以用来填充或者描边图形。要 创 建 一 个 新 模 式 , 可 以 调 用createPattern()方法并传入两个参数:一个 HTML <img>元素和一个表示如何重复图像的字符串。其中,第二个参数的值与 CSS 的 background-repeat 属性值相同,包括"repeat"、 "repeat-x"、"repeat-y"和"no-repeat"。例如:

1 var image = document.images[0],
2 pattern = context.createPattern(image, "repeat");
3 //绘制矩形
4 context.fillStyle = pattern;
5 context.fillRect(10, 10, 150, 150);

 

12.获取原始数据:

2D 上下文的一个明显的长处就是,可以通过 getImageData()取得原始图像数据。这个方法接收4 个参数:要取得其数据的画面区域的 和 坐标以及该区域的像素宽度和高度。该函数返回的对象是 ImageData 的实例。每个 ImageData 对象都有三个属性: width、 height 和data。其中 data 属性是一个数组,保存着图像中每一个像素的数据。

 

 

 

 

 



 

posted on 2016-02-28 19:48  莫尤公子  阅读(481)  评论(0编辑  收藏  举报

导航