canvas实例 扫地僧 北邮 web 前端课程之 Canvas 画布(9)

context.arcTo(200,50,100,200,40);

context.arcTo(200,50,100,200,80);

context.arcTo(200,50,100,200,120);

context.arcTo(200,50,100,200,160);

context.stroke();

(10) 最短圆弧

二次方、三次方贝塞尔曲线

贝塞尔曲线的一般概念：在数学的数值分析领域中，贝赛尔曲线(Beziercurve)是电脑图形学中相当重要的参数曲线。更高维度的贝赛尔曲线被称作贝塞尔曲面。

方法调用格式：

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

quadraticCurveTo(cpx, cpy, x, y)

方法概述：上面分别是三次贝赛尔曲线和二次贝赛尔曲线的调用格式。其主要区别在于控制曲线的控制点式不一样的。其起始点均为子路径的最后一个点，结束点均为(x,y)；在最后均要把（x，y）点加入到子路径中。

其绘制图形的例子如下，三次贝赛尔曲线有两个红点作为曲线平滑的控制点，而二次贝塞尔曲线仅有一个控制点。

JS 代码如下:

context.moveTo(10,10);

context.quadraticCurveTo(10,50,100,100);

context.stroke();

12.3.8 文字

绘图上下文提供了得到和设置文字样式的接口方法，这里将一一介绍给大家。

获得和设置文字设置： context.font[=value],

获取或设置文字对齐方式：context.textAlign[=value]，取值如下：

获得和设置文字对齐基线： context.textBaseline[=value],value 的取值如下：

context.fillText(text,x,y[,maxWidth])

context.strokeText(text,x,y[,maxWidth])

前一个方法为绘制填充的文字，后一个方法为对文字进行描边，不填充内部区域。

按照当前字体对给定的文字进行测量：

metrics = context.measureText(text),该方法返回一个 TextMetrics 对象，可以调用对象的 width 属性得到文字的宽度。

12.3.9绘制图片

要在绘图上下文中绘制图片，可以使用 drawImage 方法。该方法有三种不同的参数:

· drawImage(image,dx,dy)

· drawImage(image,dx,dy,dw,dh)

· drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

其中的 image 参数可以是 HTMLImageElement、HTMLCanvasElement 和 HTMLVideoElement 中的任一个对象。

绘制参数的含义可以参看下图：

异常：如果第一个参数不是指定的元素类型，抛出一个 TYPE_MISMATCH_ERR 异常，如果图片不能进行解码，则抛出 INVALID_STATE_ERR 异常，如果第二个参数不是允许的值，则抛出 SYNTAX_ERR 异常。

参数默认值： 如果没有指定 dw 和 dh， 则默认等于 sw 和 sh， 如果 sx,sy,sw,sh 均没有提供，则默认为 sx,xy=0,0；sw 和 sh 为图片的像素宽高。

下面给出图片的几种调用方式：

1．引用页面内图片：

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-64819-9.html