当前位置：网站首页>Chapter 2 line graph of canvas

Chapter 2 line graph of canvas

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

《canvas》 The first 2 Chapter Line graph

The first 2 Chapter Line graph

2.1 Introduction to line graph

A straight line 、 rectangular 、 polygon .

2.2 A straight line

2.2.1 canvas Coordinate system

canvas Use W3C Coordinate system .
Top left corner of origin ,x Axis positive direction right ,y Axis positive direction down .

2.2.2 Drawing straight lines

moveTo() and lineTo() Use it together to draw a straight line .

  1. A straight line 
ctx.moveTo(x1, y1); // Move to start 
ctx.lineTo(x2, y2);	// Connect to end point 
ctx.stroke();	// Began to draw 

<!DOCTYPE html>
<html>
<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, 100); cxt.lineTo(150, 50); cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  1. Multiple lines
  • Three straight lines 
<!DOCTYPE html>
<html>
<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);// Last point （100, 50） For a new starting point . //cxt.moveTo(50, 100); cxt.lineTo(100, 100); cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • triangle 
<!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, 100);// Head tail coincidence  cxt.lineTo(150, 50); cxt.lineTo(150, 100); cxt.lineTo(50, 100);// Head tail coincidence  cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • rectangular 
<!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, 100);// Head tail coincidence  cxt.lineTo(50, 50); cxt.lineTo(150, 50); cxt.lineTo(150, 100); cxt.lineTo(50, 100);// Head tail coincidence  cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

2.3 rectangular

Rectangles are divided into stroke rectangles and fill rectangles .

2.3.1 Stroke rectangle

strokeStyle Properties and strokeRect() Method to draw a stroke rectangle .

ctx.strokeStyle =  Property value ;
cts.strokeRect(x, y, width, height);
  1. strokeStyle attribute
    3 Species value ： Color value 、 Gradients and patterns .
ctx.strokeStyle = "#FF0000";
ctx.strokeStyle = "#F00";
ctx.strokeStyle = "red";
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.strokeStyle = "rgba(255, 0, 0, 0.8)";
  1. strokeRect() Method
    Set it up first strokeStyle attribute , After use strokeRect() Method .
  • Stroke rectangle 
<!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.strokeRect(50, 50, 80, 80); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

2.3.2 Filled rectangle

fillStyle Properties and fillRect() Method to draw a filled rectangle .

ctx.fillStyle =  Property value ;
cts.fillRect(x, y, width, height);
  1. fillStyle attribute
    3 Species value ： Color value 、 Gradients and patterns .
ctx.fillStyle= "#FF0000";
ctx.fillStyle= "#F00";
ctx.fillStyle= "red";
ctx.fillStyle= "rgb(255, 0, 0)";
ctx.fillStyle= "rgba(255, 0, 0, 0.8)";
  1. fillRect() Method
    Set it up first fillStyle attribute , After use fillRect() Method .
  • Filled rectangle 
<!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.fillStyle = "HotPink"; cxt.fillRect(50, 50, 80, 80); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • Draw both a stroke rectangle and a fill rectangle 
<!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.strokeRect(50, 50, 80, 80); cxt.fillStyle = "#FFE8E8"; cxt.fillRect(50, 50, 80, 80); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • Two overlapping filled rectangles 
<!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.fillStyle = "HotPink"; cxt.fillRect(50, 50, 80, 80); cxt.fillStyle = "rgba(0, 0, 255, 0.3)"; cxt.fillRect(30, 30, 80, 80); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

2.3.3 rect() Method 

rect(x, y, width, height);

strokeRect() and fillRect() After calling , Draw rectangle now .
rect() After calling , Call again stroke() or fill() To draw a rectangle .

ctx.rect(50, 50, 80, 80);
ctx.strokeStyle="red";
ctx.stroke();
// Equivalent to 
ctx.strokeStyle="red";
ctx.strokeRect(50, 50, 80, 80);

ctx.rect(50, 50, 80, 80);
ctx.fillStyle="red";
ctx.fill();
// Equivalent to 
ctx.fillStyle="red";
ctx.fillRect(50, 50, 80, 80);

<!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"); // Draw a stroked rectangle  cxt.rect(50, 50, 80, 80); cxt.strokeStyle = "red"; cxt.stroke(); // Draw the fill rectangle  cxt.rect(50, 50, 80, 80); cxt.fillStyle = "#FFE8E8"; cxt.fill(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

2.3.4 Empty rectangle 

cxt.clearRect(x, y, width, height);
  • Clear the specified area 
<!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.fillStyle = "HotPink"; cxt.fillRect(50, 50, 80, 80); cxt.clearRect(60, 60, 50, 50); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • Empty canvas
<!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.fillStyle = "HotPink"; cxt.fillRect(50, 50, 80, 80); var btn = $$("btn"); btn.onclick = function () {
       cxt.clearRect(0, 0, cnv.width, cnv.height); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas><br />
    <input id="btn" type="button" value=" Empty canvas" />
</body>
</html>

2.4 polygon

Calculate the coordinates of each vertex , And then use moveTo() and lineTo() Draw it out .

2.4.1 arrow 

<!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(40, 60); cxt.lineTo(100, 60); cxt.lineTo(100, 30); cxt.lineTo(150, 75); cxt.lineTo(100, 120); cxt.lineTo(100, 90); cxt.lineTo(40, 90); cxt.lineTo(40, 60); cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

2.4.2 Regular polygon 

<!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 n = 15; var centerX = 100; var centerY = 75; var r = 50; createPolygon(cxt, n, centerX, centerY, r);// Call custom methods createPolygon() cxt.fillStyle = "HotPink"; cxt.fill(); } /* * n： Express n Edge shape  * centerX、centerY： Express n The coordinates of the center of the edge  * r： Express n The size of the edge  */ function createPolygon(cxt, n, centerX, centerY, r) {
       cxt.beginPath(); for (var i = 0; i < n; i++) {
       var x = Math.cos(2*Math.PI*i/n); var y = Math.sin(2*Math.PI*i/n); cxt.lineTo(centerX+r*x, centerY+r*y); } cxt.closePath(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

2.4.3 Polygonal star 

<!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 n = 6; var centerX = cnv.width/2; var centerY = cnv.height/2; var rMax = 50; var rMin = 25; createPolygonalStar(cxt, n, centerX, centerY, rMax, rMin) cxt.closePath(); cxt.stroke(); /* * n： Express n Horns  * centerX、centerY： Express n Angular star center coordinates  * rMax： Express n The radius of the outer circle of the angle star  * rMin： Express n Radius of the inner circle of the angle star  */ function createPolygonalStar(cxt, n, centerX, centerY, rMax, rMin) {
       cxt.beginPath(); for (var i = 0; i < n; i++) {
       var xMax = rMax*Math.cos(2*Math.PI*i/n); var yMax = rMax*Math.sin(2*Math.PI*i/n); cxt.lineTo(centerX+xMax, centerY+yMax); var xMin = rMin*Math.cos(2*Math.PI*(i+0.5)/n); var yMin = rMin*Math.sin(2*Math.PI*(i+0.5)/n); cxt.lineTo(centerX+xMin, centerY+yMin); } cxt.closePath(); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

2.5 Paint palette

  • Checkered palette 
<!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 n = 8; var step = 30; for(var y = 0; y < n; y++) {
       for(var x = 0; x < n; x++) {
       cxt.fillStyle = "rgb(" + Math.floor(255-255*y/n) + ", " + Math.floor(255-255*x/n) + ", 0)"; cxt.fillRect(x*step, y*step, step, step); } } } </script>
</head>
<body>
    <canvas id="canvas" width="300" height="300" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • Gradient palette 
<!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 r = 255, g = 0, b = 0; var step = 6; for(var i = 0; i < 150; i++) {
       if(i < 25) {
       g += 10; } else if(i > 25 && i < 50) {
       r -= 10; } else if (i > 50 && i < 75) {
       g -= 10; b += 10; } else if(i >= 75 && i < 100) {
       r += 10; } else {
       b -= 10; } cxt.fillStyle = "rgb(" + r + ", " + g + ", " + b + ")"; cxt.fillRect(step*i, 0, step, cnv.height-10); } } </script>
</head>
<body>
    <canvas id="canvas" width="1000" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
原网站

版权声明
本文为[yxqq378287007]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/175/202206240237028163.html

边栏推荐

猜你喜欢

随机推荐