当前位置：网站首页>Chapter 4 line operation of canvas

Chapter 4 line operation of canvas

2022-06-24 07:58:00 【yxqq378287007】

《canvas》 The first 4 Chapter Line operation

The first 4 Chapter Line operation

The first 4 Chapter Line operation

4.1 Introduction to line operation

Line operation properties

attribute	explain
lineWidth	Define the line width
lineCap	Define line cap style
lineJoin	Define the style at the intersection of two lines

Line operation method

Method	explain
setLineDash()	Define the virtual and real styles of lines

4.2 lineWidth attribute

cxt.lineWidth =  Integers ;

Default 1, Default unit px.

Line width

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); //lineWidth The value is 5 //cxt.beginPath(); cxt.moveTo(20, 20); cxt.lineTo(180, 20); cxt.lineWidth = 5; cxt.stroke(); //lineWidth The value is 10 cxt.beginPath(); cxt.moveTo(20, 70); cxt.lineTo(180, 70); cxt.lineWidth = 10; cxt.stroke(); //lineWidth The value is 15 cxt.beginPath(); cxt.moveTo(20, 120); cxt.lineTo(180, 120); cxt.lineWidth = 15; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

Curve width

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, false); cxt.lineWidth = 5; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

Suppose the line width lineWidth,strokeRect() Method to draw a rectangle with the actual width of width+lineWidth, The actual height is height+lineWidth,arc() Method to draw a circle with the actual radius of radius+lineWidth.

4.3 lineCap attribute

Define line cap styles at the beginning and end of the line .

cxt.lineCap = " Property value ";

Property value	explain
butt	Wireless cap , Default
round	Round cap , The radius is half the line width
square	Square thread cap , The width is half of the line width

Line cap straight line

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.lineWidth = 16; //lineCap Value is the default （butt） //cxt.beginPath(); cxt.moveTo(20, 20); cxt.lineTo(180, 20); //cxt.lineCap = "butt"; cxt.stroke(); //lineCap Value changed to round cxt.beginPath(); cxt.moveTo(20, 70); cxt.lineTo(180, 70); cxt.lineCap = "round"; cxt.stroke(); //lineCap Value changed to square cxt.beginPath(); cxt.moveTo(20, 120); cxt.lineTo(180, 120); cxt.lineCap = "square"; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(50, 50); cxt.lineTo(100, 50); cxt.lineTo(50, 100); cxt.lineTo(100, 100); cxt.lineWidth = 12; cxt.lineCap = "round"; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

4.4 lineJoin attribute

Define the style at the intersection of lines .

cxt.lineJoin = " Property value ";

Property value	explain
miter	Sharp corners , Default
round	Round corners , The radius is half the line width
bevel	Bevel angle , The diagonal is the line width

Line junction style

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var yoffset = 100; cxt.lineWidth = 12; //cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(100, 50); cxt.lineTo(50, 100); cxt.lineTo(100, 100); //cxt.lineJoin = "miter"; cxt.stroke(); cxt.beginPath(); cxt.moveTo(50, 50+yoffset); cxt.lineTo(100, 50+yoffset); cxt.lineTo(50, 100+yoffset); cxt.lineTo(100, 100+yoffset); cxt.lineJoin = "round"; cxt.stroke(); cxt.beginPath(); cxt.moveTo(50, 50+yoffset*2); cxt.lineTo(100, 50+yoffset*2); cxt.lineTo(50, 100+yoffset*2); cxt.lineTo(100, 100+yoffset*2); cxt.lineJoin = "bevel"; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="350" style="border:1px dashed gray;"></canvas>
</body>
</html>

4.5 setLineDash() Method

Define the virtual and real styles of lines .

cxt.setLineDash(array);

array Is an array combination .

[10, 5] Express 10px Solid line ,5px blank ,Chrome、Firefox Support setLineDash() Method ,IE I won't support it .

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.strokeStyle = "red"; cxt.setLineDash([10, 5]); cxt.strokeRect(50, 50, 80, 80); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>