How to use HTML5 Canvas to draw polygons such as triangles and rectangles-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

How to use HTML5 Canvas to draw polygons such as triangles and rectangles

不言

Jun 11, 2018 pm 05:11 PM

canvas html5 triangle rectangle

This article mainly introduces the method of drawing polygons such as triangles and rectangles with the help of HTML5 Canvas. Through some attributes given at the beginning of the article and the examples of triangles and rectangles below, the same method can be used to draw other polygons. You need to Friends can refer to the following

The main properties and methods of the CanvasRenderingContext2D object required to draw polygons using HTML5 Canvas (those with "()" are methods) are as follows:

Properties or methods	Basic description
strokeStyle	Used to set the color, gradient and mode of the brush drawing path. The value of this property can be a string representing the CSS color value. If your drawing requirements are more complex, the value of this property can also be a `CanvasGradient` object or a `CanvasPattern` object
globalAlpha	Define the transparency of the drawn content, the value is between 0.0 (completely transparent) and 1.0 (completely opaque), the default value is 1.0.
lineWidth	Define the width of the drawn line. The default value is 1.0, and this property must be greater than 0.0. The wider line is centered on the path, with half the line width on each side.
lineCap	Specify how to draw the line caps at both ends of the line. Legal values are butt, round, and square. The default value is "butt".
beginPath()	Start a new drawing path. Remember to call this method every time before drawing a new path.
moveTo(int x, int y)	Define the starting point coordinates of a new drawing path
lineTo(int x, int y)	Define the coordinates of the midpoint of a drawing path
stroke(int x, int y)	along the drawing path Draw straight lines sequentially with coordinate points
closePath()	If the current drawing path is open, close the drawing path.

Drawing a triangle

<!DOCTYPE html>   
<html>   
<head>   
<meta charset="UTF-8">   
<title>HTML5 Canvas绘制三角形入门示例</title>   
</head>   
<body>   
   
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->   
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
您的浏览器不支持canvas标签。   
</canvas>   
   
   
<script type="text/javascript">   
//获取Canvas对象(画布)   
var canvas = document.getElementById("myCanvas");   
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
if(canvas.getContext){     
    //获取对应的CanvasRenderingContext2D对象(画笔)   
    var ctx = canvas.getContext("2d");     
        
    //开始一个新的绘制路径   
    ctx.beginPath();   
    //设置线条颜色为蓝色   
    ctx.strokeStyle = "blue";   
    //设置路径起点坐标   
    ctx.moveTo(20, 50);   
    //绘制直线线段到坐标点(60, 50)   
    ctx.lineTo(20, 100);   
    //绘制直线线段到坐标点(60, 90)   
    ctx.lineTo(70, 100);       
    //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。   
    ctx.closePath();   
    //最后，按照绘制路径画出直线   
    ctx.stroke();   
}   
</script>   
</body>   
</html>

Copy after login

The corresponding display effect is as follows:

2016314112438272.png (421×318)

Drawing a rectangle
The reason why Canvas drawing rectangle is mentioned separately is because the Canvas brush tool-CanvasRenderingContext2D object provides a dedicated method for drawing rectangles. The corresponding rectangular effect of

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>HTML5 Canvas绘制矩形入门示例</title>  
</head>  
<body>  
   
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->  
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">  
您的浏览器不支持canvas标签。   
</canvas>  
   
<script type="text/javascript">  
//获取Canvas对象(画布)   
var canvas = document.getElementById("myCanvas");   
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
if(canvas.getContext){     
    //获取对应的CanvasRenderingContext2D对象(画笔)   
    var ctx = canvas.getContext("2d");     
        
    //开始一个新的绘制路径   
    ctx.beginPath();   
    //设置线条颜色为蓝色   
    ctx.strokeStyle = "blue";   
    //以canvas中的坐标点(10,10)作为绘制起始点，绘制一个宽度为80px、高度为50px的矩形   
    ctx.rect(10, 10, 80, 50);   
    //按照指定的路径绘制直线   
    ctx.stroke();   
    //关闭绘制路径   
    ctx.closePath();   
}   
</script>  
</body>  
</html>

Copy after login

is displayed as follows:
2016314112508746.png (422×310)

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. For more related content, please pay attention to PHP Chinese net!

Related recommendations:

HTML5 and CSS3 Realize the switching effect of spiritual animation

The above is the detailed content of How to use HTML5 Canvas to draw polygons such as triangles and rectangles. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn