Home > Article > Web Front-end > How to draw graphics using H5's CanvasAPI

How to draw graphics using H5's CanvasAPI

php中世界最好的语言Original: 2018-01-09 09:51:022344browse

This time I will bring you H5CanvasAPI how to draw graphics and how to use Canvas to make graphics? What are the precautions for making graphics with Canvas? The following is a practical case, let’s take a look.

Canvas element
The following html code defines a canvas element.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Canvas快速入门</title>  
    <meta charset="utf-8"/>  
</head>  
<body>  
<div>  
    <canvas id="mainCanvas" width="640" height="480"></canvas>  
</div>  
</body>  
</html>

Access the canvas element through the following Javascript statement:

//DOM写法   
window.onload = function () {   
    var canvas = document.getElementById("mainCanvas");   
    var context = canvas.getContext("2d");   
};   
//jQuery写法   
$(document).ready(function () {   
    var canvas = $("#mainCanvas");   
    var context = canvas.get(0).getContext("2d");   
});   
//接下来就可以调用context的方法来调用绘图API

2. Basic API
2.1 Coordinate system
Canvas 2D rendering context uses planar Cartesian coordinates System, the upper left corner is the origin (0,0), and 1 unit of the coordinate system is equivalent to 1 pixel of the screen.

//绘制一个填充矩形   
context.fillRect(x, y, width, height)   
//绘制一个边框矩形   
context.strokeRect(x, y, width, height)   
//清除一个矩形区域   
context.clearRect(x, y, width, height)

2.2.2 Lines
There are some differences between drawing lines and drawing graphics. Lines are actually called paths. To draw a simple path, you must first call the beginPath method, then call moveTo to set the starting point coordinates of the path, then call lineTo to set the end point coordinates of the line segment (can be set multiple times), and then call closePath to complete the path drawing. Finally, call stroke to draw the outline (or call fill to fill the path). The following is an example:

//示例   
context.beginPath();    //开始路径   
context.moveTo(40, 40);    //移动到点(40,40)   
context.lineTo(300, 40);    //画线到点(300,30)   
context.lineTo(40, 300);    //画线到点(40,300)   
context.closePath();    //结束路径   
context.stroke();    //绘制轮廓   
//或者填充用context.fill();

2.2.3 Circle
Canvas actually does not have a special method for drawing a circle. You can simulate a circle by drawing an arc. Since an arc is a path, the API for drawing arcs should be included between beginPath and closePath.
2.3 Style
2.3.1 Modify line color

var color;   
//指定RGB值   
color = "rgb(255, 0, 0)";   
//指定RGBA值（最后一个参数为alpha值，取值0.0~1.0）   
color = "rgba(255, 0, 0, 1)";   
//指定16进制码   
color = "#FF0000";   
//用单词指定   
color = "red";   
//设置填充颜色   
context.fillStyle = color;   
//设置边框颜色   
context.strokeStyle = color;

2.3.2 Modify line width

//指定线宽值   
var value= 3;   
//设置边框颜色   
context.linewidth = value;

2.4 Draw text

//Specify font style

context.font = "italic 30px bold";

//Draw text at point (40,40)

context.fillText("Hello world!", 40, 40);

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to draw graphics using H5's CanvasAPI

Related articles