Home >Web Front-end >HTML Tutorial >Detailed graphic explanation on how to draw a straight line using html5 canvas
Detailed graphic explanation on how to draw a straight line using html5 canvas
- yuliaOriginal
- 2018-10-24 17:14:136656browse
First of all, I will introduce to you the properties needed to draw a straight line with canvas
moveTo(x,y) can set the coordinates of the starting position of the line
lineTo(x,y) can set the line The coordinates of the end position
lineWidth can set the width of the line
strokeStyle can set the color of the line
Use canvas to draw a straight line, detailed steps:
1. Use the
2. Use var c=document.getElementById("myCanvas") to get the canvas element
3. Use var ctx=c.getContext("2d") to create a context object
4. Set the starting point and end point of the straight line, the starting position moveTo(25,25), and the ending position lineTo(175,175)
5. You can use ctx.lineWidth = 5 to set the width of the line, ctx.strokeStyle = "red" to set the color of the line
6. Finally, use ctx.stroke() to draw a straight line and it is completed
The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="200px" height="200px" style="border: 1px solid #000000;"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(25,25);
ctx.lineTo(175,175);
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.stroke();
</script>
</html>Rendering:
The above introduces you how to draw a straight line with canvas. It is the simplest part of canvas. Beginners must try it by themselves to see if you can write it. Such an effect, I hope this article will be helpful to you!
【Related tutorial recommendations】
1. Html5 video tutorial
2. JavaScript video tutorial
3. bootstrap tutorial
The above is the detailed content of Detailed graphic explanation on how to draw a straight line using html5 canvas. For more information, please follow other related articles on the PHP Chinese website!