Welcome to CSDN blog.csdn.net/m0_46424423
9. Canvas painting line
<canvas id="can" width="500px" height="300px"></canvas>
Copy the codeNote: Size can only be set in inter-line styles, not CSS
var canvas = document.getElementById('can'); Var CTX = canvas.getContext("2d"); / / brushCopy the codectx.moveTo(100, 100); // ctx.lineTo(200, 100); / / the end CTX. Stroke (); // draw ctx.closepath (); // continuous line, form closed ctx.fill(); // Fill ctx.lineWidth = 10; // Where to write the thickness of the line, which is equivalent to writing after moveto ？？？？ What doesn't workCopy the codeWant to achieve a thin, a thick
A graph, a stroke out, only a thickness, want to achieve, must open a new image
ctx.beginPath();
Copy the codeClosePath () is a graph closure, not a graph, and cannot be closed
10 canvas painting rectangular
ctx.rect(100, 100, 150, 100);
ctx.stroke();
ctx.fill();
Copy the codeTo simplify the
ctx.strokeRect(100, 100, 200, 100); // rectangle ctx.fillrect (100, 100, 200, 100); // Fill the rectangleCopy the code11. The cube falls
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> * {padding: 0; margin: 0; } canvas { width: 500px; height: 300px; border: 1px solid; } </style> </head> <body> <canvas id="can" width="500px" height="300px"></canvas> <! -- --> <script> var canvas = document.getElementById('can'); Var CTX = canvas.getContext("2d"); Var height = 100; var timer = setInterval(function () { ctx.clearRect(0, 0, 500, 300); StrokeRect (100, height, 50, 50); height += 5; }, 1000/30); </script> </body> </html>Copy the codeAssignment: Free fall
12. The circle is drawn on the canvas
<script> var canvas = document.getElementById('can'); Var CTX = canvas.getContext("2d"); // Brush // Center (x,y), Radius (r), radian (start radian, end radian), direction ctx.arc(100, 100, 50, 0, math.pi * 1.8, 0)// clockwise 0; Counterclockwise 1 ctx.lineTo(100, 100); ctx.closePath(); ctx.stroke(); </script>Copy the code13. Draw rounded rectangles
<script> var canvas = document.getElementById('can'); Var CTX = canvas.getContext("2d"); Ctx.moveto (100, 110); // brush // ABC for rectangle endpoints // B(x,y),C(x,y), rounded size (equivalent to border-radius) ctx.moveto (100, 110); ctx.arcTo(100, 200, 200, 200, 10); ctx.arcTo(200, 200, 200, 100, 10); ctx.arcTo(200, 100, 100, 100, 10); ctx.arcTo(100, 100, 100, 200, 10); ctx.stroke(); </script>Copy the codeCanvas Bezier curve
Bessel curve
var canvas = document.getElementById('can'); Var CTX = canvas.getContext("2d"); / / brush CTX. BeginPath (); ctx.moveTo(100, 100); // ctx.quadraticCurveTo(200, 200, 300, 100); CTX. QuadraticCurveTo (200, 200, 300, 100, 400 200); Three CTX. Stroke ();Copy the codeThe waves
Note: initialization
ctx.beginPath();
Copy the codeThe waves demo
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title>Document</title> <style> canvas {width: 500px; height: 300px; border: 1px solid; } </style> </head> <body> <canvas id="can" width="500px" height="300px"></canvas> <! -- --> <script> var width = 500; var height = 300; var offset = 0; var num = 0; var canvas = document.getElementById('can'); Var CTX = canvas.getContext("2d"); Function () {ctx.clearRect(0, 0, 500, 300); // brush setInterval(function () {ctx.clearrect (0, 0, 500, 300); ctx.beginPath(); ctx.moveTo(0 + offset - 500, height / 2); ctx.quadraticCurveTo(width / 4 + offset - 500, height / 2 + Math.sin(num) * 120, width / 2 + offset - 500, height / 2); ctx.quadraticCurveTo(width / 4 * 3 + offset - 500, height / 2 - Math.sin(num) * 120, width + offset - 500, height / 2); Ctx.moveto (0 + offset, height / 2); ctx.quadraticCurveTo(width / 4 + offset, height / 2 + Math.sin(num) * 120, width / 2 + offset, height / 2); ctx.quadraticCurveTo(width / 4 * 3 + offset, height / 2 - Math.sin(num) * 120, width + offset, height / 2); ctx.stroke(); offset += 5; offset %= 500; Num + = 0.02; }, 1000 / 30) </script> </body> </html>Copy the code15. Coordinate translation, rotation and scaling
Rotate the translation
<script> var canvas = document.getElementById('can'); Var CTX = canvas.getContext("2d"); / / brush CTX. BeginPath (); ctx.rotate(Math.PI / 6); // Ctx.translate (100, 100); // Ctx.translate (100, 100); Ctx.moveto (0, 0); ctx.moveto (0, 0); ctx.lineTo(100, 100); ctx.stroke(); </script>Copy the codeThe zoom
<script> var canvas = document.getElementById('can'); Var CTX = canvas.getContext("2d"); / / brush CTX. BeginPath (); ctx.scale(2, 2); //x times his coefficient,y times his coefficient ctx.strokerect (100, 100, 100, 100); // X times his coefficient,y times his coefficient ctx.strokerect (100, 100, 100, 100); </script>Copy the code16. Canvas save and restore
I don’t want the others to be affected by the previous Settings
<script> var canvas = document.getElementById('can'); Var CTX = canvas.getContext("2d"); / / brush CTX. The save (); // Save coordinate shift data, scale data, rotation data ctx.beginPath(); ctx.translate(100, 100); ctx.rotate(Math.PI / 4); ctx.strokeRect(0, 0, 100, 50); ctx.beginPath(); ctx.restore(); Ctx.fillrect (100, 0, 100, 50); </script>Copy the code17. Canvas background fill
<script> var canvas = document.getElementById('can'); Var CTX = canvas.getContext("2d"); Var img = new Image(); img.src = "file:///C:/Users/f1981/Desktop/source/pic3.jpeg"; Img.onload = function () {// Ctx.beginPath (); ctx.translate(100, 100); Var bg = ctx.createpattern (img, "no-repeat"); // ctx.fillStyle = "blue"; ctx.fillStyle = "bg"; ctx.fillRect(0, 0, 200, 100); } </script>Copy the codeOpen in Live Server can only open the IMG file in the same directory
18. Linear gradient
<script> var canvas = document.getElementById('can'); var ctx = canvas.getContext("2d"); ctx.beginPath(); var bg = ctx.createLinearGradient(0, 0, 200, 200); bg.addColorStop(0, "white"); // the number is between 0 and 1 // bg.addColorStop(0.5, "blue"); bg.addColorStop(1, "black"); ctx.fillStyle = bg; ctx.translate(100, 100); Ctx.fillrect (0, 0, 200, 200); </script>Copy the code19. Canvas radiation gradient
<script> var canvas = document.getElementById('can'); var ctx = canvas.getContext("2d"); ctx.beginPath(); // var bg = ctx.createRadialGradient(x1,y1,r1,x2,y2,r2); Var bg = CTX. CreateRadialGradient (100, 100, 0, 100, 100, 100); // var bg = ctx.createRadialGradient(100, 100, 100, 100, 100, 100); The colors inside the starting circle are all the starting colors bg.addColorStop(0, "red"); Bg. AddColorStop (0.5, "green"); bg.addColorStop(1, "blue"); ctx.fillStyle = bg; ctx.fillRect(0, 0, 200, 200); </script>Copy the code20. The shadows on the canvas
<script>
var canvas = document.getElementById('can');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.shadowColor = "blue";
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 15;
ctx.strokeRect(0, 0, 200, 200);
</script>
Copy the codeCanvas renders text
<script> var canvas = document.getElementById('can'); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.strokeRect(0, 0, 200, 200); ctx.fillStyle = "red"; ctx.font = "30px Georgia"; // ctx.strokeText("panda", 200, 100); // Ctx. fillText("monkey", 200, 250); // Text padding </script>Copy the code22. Canvas Side style
<script> var canvas = document.getElementById('can'); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.lineWidth = 15; ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.lineTo(100, 130); ctx.lineCap = "square"//butt round ctx.lineJoin = "miter"; Round bevel miter(miterLimit) ctx.miterLimit = 5; ctx.stroke(); </script>Copy the code23.SVG draws lines and rectangles
SVG is different from Canvas
SVG: Vector graphics, large without distortion, suitable for large maps, usually with few or simple animations, tags and CSS drawings
Canvas: suitable for small area drawing, animation, JS drawing
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style>. stroke-width: 3px; } .line2 { stroke: red; stroke-width: 5px; } </style> </head> <body> <svg width="500px" height="300px" style="border:1px solid"> <line x1="100" y1="100" x2="200" y2="100" class="line1"></line> <line x1="200" y1="100" x2="200" y2="200" class="line2"></line> <rect height="50" width="100" x="0" y="0"></rect><! -- All closed graphics, in SVG, The default are born with and painted - > < the rect height = "50" width = "100" x = "0" y = "0" rx = "10" ry = "20" > < / the rect > < / SVG > < / body > < / HTML >Copy the codeSVG draws circles, ellipses, and straight lines
<style>
polyline {
fill: transparent;
stroke: blueviolet;
stroke-width: 3px;
}
</style>
Copy the code<svg width="500px" height="300px" style="border:1px solid"> <circle r="50" cx="50" cy="220"></circle><! - round - the - > < the ellipse rx = "100" ry = "30" cx = "400" cy = "200" > < / the ellipse > <! Polyline points="0 0, 50 50, 50 100,100 100,100 50"></polyline><! -- Curves: fill by default --> </ SVG >Copy the codeSVG draws polygons and text
<polygon points="0 0, 50 50, 50 100,100 100,100 50"> < p style =" max-width: 100%; clear: both; min-height: 1em;Copy the codepolygon {
fill: transparent;
stroke: black;
stroke-width: 3px;
}
text {
stroke: blue;
stroke-width: 3px;
}
Copy the code26.SVG transparency and line styles
transparent
Stroke - opacity: 0.5; /* Opacity */ fan-opacity: 0.3; /* Fill translucent */Copy the codeLine style
stroke-linecap: butt; /* round square is an extra length */Copy the codestroke-linejoin:; /* Bevel round miter */Copy the code27. Path tag for SVG
<path d="M 100 100 L 200 100"></path> <path d="M 100 100 L 200 100 L 200 200"></path><! <path d="M 100 100 L 200 100 L 100 100"></path> <! --> <path d="M 100 100 H 200 V 200"></path><! -- H horizontal V vertical --> <path d="M 100 100 H 200 V 200 z"></path><! -- z represents a closed interval, case insensitive -->Copy the codepath {
stroke: red;
fill: transparent
}
Copy the code28. Draw arc path
<path d="M 100 100 A 100 50 0 1 1 150 200"></path> <! -- A represents the arc instruction, starting with M100 100, ending with 150 200, radius 100, short radius 50, rotation Angle 0,1 great arc, 1 clockwise -->Copy the code29. SVG linear gradient
<svg width="500px" height="300px" style="border:1px solid"> <defs> <! - define a ramp - > < that linearGradient id = "bg1 x1 =" 0 "y1" = "0" x2 = "0" y2 = "100%" > < stop offset = "0%" Style =" color: RGB (255,255,0)"></stop> < offset="100%" style=" color: RGB (255,0,0)"></stop> </linearGradient> </defs> <rect x="100" y="100" height="100" width="200" style="fill:url(#bg1)"></rect> </svg>Copy the codeSVG Gaussian blur
<svg width="500px" height="300px" style="border:1px solid"> <defs> <! - define a ramp - > < that linearGradient id = "bg1 x1 =" 0 "y1" = "0" x2 = "0" y2 = "100%" > < stop offset = "0%" Style =" color: RGB (255,255,0)"></stop> < offset="100%" style=" color: RGB (255,0,0)"></stop> </linearGradient> <filter id="Gaussian"> <feGaussianBlur in="SourceGraphic" stdDeviation="20"></feGaussianBlur> </filter> </defs> <rect x="100" y="100" height="100" width="200" style="fill:url(#bg1); filter:url(#Gaussian)"></rect> </svg>Copy the code31.SVG dotted lines and simple animations
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style>. stroke-width: 10px; /* stroke-dasharray: 10px; */ /* stroke-dasharray: 10px 20px; 1,2,3, take two values (array) */ /* stroke-dasharray: 10px 20px 30px; */ /* stroke-dashoffset: 10px; Offset */ /* stroke-dashoffset: 200px-- >0; */ Stroke-dashoffset: 200px; animation: move 2s linear infinite alternate-reverse; } @keyframes move { 0% { stroke-dashoffset: 200px; } 100% { stroke-dashoffset: 0px; } } </style> </head> <body> <svg width="500px" height="300px" style="border:1px solid"> <line x1="100" y1="100" x2="200" y2="100" class="line1"></line> </svg> </body> </html>Copy the code32. SVG Viewbox (scale)
< SVG width="500px" height="300px" viewbox="0,0,250,150" style="border:1px solid"> <! - viewbox is half the width of high - > < line x1 = "100" y1 = "100" x2 = "200" y2 = "100" class = ", line1 "> < / line > < / SVG >Copy the codeSummary: Not very useful in SVG development