Analysis of strings, paths, backgrounds, and pictures based on HTML5 Canvas

This article mainly introduces the analysis of strings, paths, backgrounds, and pictures based on HTML5 Canvas. It has certain reference value. Now I share it with everyone. Friends in need can refer to it

HTML5 A new canvas tag has been added, through which you can use JavaScript to draw images in web pages. What the label gets in the web page is a rectangular blank area, and its width and height can be adjusted through the width and height properties.

The method of creating a Canvas is as follows:

<canvas id=”canvas” width=”600” height=”400”></canvas>

You can add alternative text when the tag is unavailable, as shown below:

<canvas id=”canvas” width=”600” height=”400”>
         <p>Your browserdoes not support the canvas element.</p>
</canvas>

Currently, new versions of various browsers have gradually HTML5 is now supported, so please make sure your browser is a new version of Chrome, Firefox or IE9 or above before starting to use it.

The tag itself does not have the ability to draw pictures. It only provides an area for JavaScript to draw images, so the drawing work needs to be completed in JavaScript. The following is the preparation work required before drawing:

var canvas = document.getElementById(“canvas”);
var context2D = canvas.getContext(“2d”);

First, you need to obtain the canvas object in the web page, and then use the getContext() method to obtain the two-dimensional drawing object from the canvas. The parameter "2d" of the getContext() method means two dimensions (it is said that it will be expanded to three dimensions in the future, but currently the only available parameter is "2d").

The obtained Context object is a built-in object of HTML5, which contains many graphics drawing and adjustment methods. You can draw the required graphics in the Canvas canvas by operating it in JavaScript.

String

Use the fillText() method of the Context object to draw a string in the canvas. The prototype of the fillText() method is as follows:

void fillText(text, left,top, [maxWidth]);

Its four parameters The meaning is divided into: the string to be drawn, the abscissa and ordinate of the upper left corner in the canvas when drawn into the canvas, and the maximum length of the drawn string. The maximum length maxWidth is an optional parameter.

In addition, you can adjust the font and size of the string by changing the font attribute of the Context object. The default is "10px sans-serif".

The following example displays the string "Hello Canvas!" in the canvas (the upper left corner of the string is in the center of the canvas)

<canvas id="canvas" width="600"height="400">
         <p>Your browserdoes not support the canvas element!</p>
</canvas>
<script type="text/javascript">
window.onload = function() {
         var canvas =document.getElementById("canvas");
         var context2D =canvas.getContext("2d");
         context2D.font ="35px Times New Roman";
         context2D.fillText("HelloCanvas!", canvas.width / 2, canvas.height / 2);
}
</script>

Path

HTML5 Canvas The basic graphics are based on paths. Usually the moveTo(), lineTo(), rect(), arc() and other methods of the Context object are used to first trace the path points of the graphic on the canvas, and then the fill() or stroke() method is used to fill the graphic or draw according to the path points. line.

Usually, you need to call the beginPath() method of the Context object before starting to draw a path. Its function is to clear the previous path and remind the Context to start drawing a new path. Otherwise, when the stroke() method is called, it will All paths before drawing will affect the drawing effect, and also affect the performance of the web page due to repeated operations. In addition, calling the closePath() method of the Context object can explicitly close the current path, but the path will not be cleared.

The following are the prototypes of some methods for drawing paths:

void moveTo(x, y);

Used to explicitly specify the path starting point. By default, the starting point of the first path is the (0, 0) point of the canvas, and the subsequent starting points are the end points of the previous path. The two parameters are divided into x and y coordinate values ​​representing the starting point.

void lineTo(x, y);

is used to draw a straight path from the starting point to the specified position. After the drawing is completed, the drawn starting point will move to the specified position. Location. The parameters represent the x and y coordinate values ​​of the specified location.

void rect(left, top,width, height);

is used to draw a rectangle with known upper left vertex position, width and height. After the drawing is completed The drawing starting point of the Context will be moved to the upper left corner of the rectangle. The parameters represent the x and y coordinates of the upper left corner of the rectangle and the width and height of the rectangle.

void arcTo(x1, y1, x2, y2,radius);

is used to draw an arc that is tangent to two line segments. The two line segments are respectively Take the current Context drawing starting point and the (x2, y2) point as the starting point, both end at the (x1, y1) point, and the radius of the arc is radius. After the drawing is completed, the drawing starting point will move to the tangent point between the line segment and the arc starting from (x2, y2).

void arc(x, y, radius,startAngle, endAngle, anticlockwise);

is used to draw a circle with (x, y) point as the center and radius as Radius, startAngle is the starting radian, endAngle is the arc of the ending radian. anticlockwise is a Boolean parameter, true means counterclockwise, false means clockwise. The two radians in the parameters are represented by 0°, and the position is at 3 o'clock; the Math.PI value represents 180°, and the position is at 9 o'clock.

void quadraticCurveTo(cpx,cpy, x, y);

is used to draw with the current Context drawing starting point as the starting point, and the (cpx, cpy) point as the control point , a quadratic spline path with the (x, y) point as the end point.

void bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y);

is used to draw the current Context drawing starting point as the starting point, (cpx1,cpy1) The point and (cpx2, cpy2) point are two control points, and the (x, y) point is the Bezier curve path of the end point.

路径描绘完成后，需要调用Context对象的fill()和stroke()方法来填充路径和绘制路径线条，或者调用clip()方法来剪辑Canvas区域。以上三个方法的原型如下：

void stroke();

用于按照已有的路径绘制线条。

void fill();

用于使用当前的填充风格来填充路径的区域。

void clip();

用于按照已有的路线在画布中设置剪辑区域。调用clip()方法之后，图形绘制代码只对剪辑区域有效而不再影响区域外的画布。如调用之前没有描绘路径（即默认状态下），则得到的剪辑区域为整个Canvas区域。

此外，Context对象还提供了相应的属性来调整线条及填充风格，如下所示：

strokeStyle

线条的颜色，默认为”#000000”，其值可以设置为CSS颜色值、渐变对象或者模式对象。

fillStyle

填充的颜色，默认为”#000000”，与strokeStyle一样，值也可以设置为CSS颜色值、渐变对象或者模式对象。

lineWidth

线条的宽度，单位是像素（px），默认为1.0。

lineCap

线条的端点样式，有butt（无）、round（圆头）、square（方头）三种类型可供选择，默认为butt。

lineJoin

线条的转折处样式，有round（圆角）、bevel（平角）、miter（尖角）三种；类型可供选择，默认为miter。

miterLimit

线条尖角折角的锐利程序，默认为10。

如下的示例分别调用了部分上述方法和属性来绘制图形：

<canvas id="canvas" width="600"height="400">
         <p>Your browserdoes not support the canvas element!</p>
</canvas>
<script type="text/javascript">
window.onload = function() {
         var canvas =document.getElementById("canvas");
         var context2D =canvas.getContext("2d");
         //绘制相交的线段
         context2D.beginPath();
         context2D.moveTo(50,50);
         context2D.lineTo(100,100);
         context2D.moveTo(200,50);
         context2D.lineTo(100,100);
         context2D.stroke();
         //绘制与这两条线段相切的红色圆弧
         context2D.beginPath();
         context2D.strokeStyle= "#ff0000";
         context2D.moveTo(50,50);
         context2D.arcTo(100,100, 200, 50, 100);
         context2D.stroke();
         //绘制一个蓝色的圆
         context2D.beginPath();
         context2D.strokeStyle= "#0000ff";
         context2D.arc(300,250, 100, 0, Math.PI * 2, false);
         context2D.stroke();
         //将上面的圆填充为灰色
         context2D.fillStyle ="#a3a3a3";
         context2D.fill();
         //在上面的圆中剪辑一个圆形方形区域
         context2D.beginPath();
         context2D.rect(250,200, 100, 100);
         context2D.clip();
         //在剪辑区域中填充一个大于该区域尺寸的矩形
         context2D.fillStyle ="yellow";
         context2D.fillRect(0,0, 400, 400);
}
</script>

画布背景

在上面的例子中，调用了fillRect()方法。实际上，Context对象拥有3个方法可以直接在画布上绘制图形而不需要路径，可以将其视为直接在画布背景中绘制。这3个方法的原型如下：

void fillRect(left, top,width, height);

用于使用当前的fillStyle（默认为”#000000”，黑色）样式填充一个左上角顶点在(left, top)点、宽为width、高为height的矩形。

void strokeRect(left, top,width, height);

用于使用当前的线条风格绘制一个左上角顶点在(left, top)点、宽为width、高为height的矩形边框。

void clearRect(left, top,width, height);

用于清除左上角顶点在(left,top)点、宽为width、高为height的矩形区域内的所有内容。

图片

Context对象中拥有drawImage()方法可以将外部图片绘制到Canvas中。drawImage()方法的3种原型如下：

drawImage(image, dx, dy);

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

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

下图展示了原型中各参数的含义：

其中，image参数可以是HTMLImageElement、HTMLCanvasElement或者HTMLVideoElement。第三个方法原型中的sx、sy在前两个中均为0，sw、sh均为image本身的宽和高；第二和第三个原型中的dw、dh在第一个中也均为image本身的宽和高。

如下的示例将一张远程图片绘制到了画布中：

<canvas id="canvas" width="600"height="400">
         <p>Your browserdoes not support the canvas element!</p>
</canvas>
<script type="text/javascript">
window.onload = function() {
         var canvas =document.getElementById("canvas");
         var context2D =canvas.getContext("2d");
         var pic = new Image();
         pic.src ="http://imgsrc.baidu.com/forum/pic/item/e6b14bc2a4561b1fe4dd3b24.jpg";
         context2D.drawImage(pic,0, 0);
}
</script>

以上代码均通过Google Chrome 14.0及Mozilla Firefox 7.0浏览器测试。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5 Canvas实现绘制一个像素宽的细线

The above is the detailed content of Analysis of strings, paths, backgrounds, and pictures based on HTML5 Canvas. For more information, please follow other related articles on the PHP Chinese website!