1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <canvas id="myCanvas" width="300" height="300" style="border:1px solid black"></canvas> 11 <img id="scream" src="https://www.runoob.com/try/demo_source/img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p> 12 <script> 13 var c=document.getElementById("myCanvas"); 14 var ctx=c.getContext("2d"); 15 // 区块着色： 16 // var c=document.getElementById("myCanvas"); 17 // var ctx=c.getContext("2d"); 18 // ctx.fillStyle="#ff0000"; 19 // ctx.fillRect(0,0,150,75); 20 21 // 画线算法： 22 // var c=document.getElementById("myCanvas"); 23 // var ctx=c.getContext("2d"); 24 // ctx.moveTo(0,0); 25 // ctx.lineTo(100,200); 26 // ctx.stroke(); 27 28 // 画圆算法： 29 // var c=document.getElementById("myCanvas"); 30 // var ctx=c.getContext("2d"); 31 // ctx.beginPath(); 32 // ctx.arc(95,50,40,0,2*Math.PI); 33 // ctx.stroke(); 34 35 // 实体文本绘制: 36 // var c=document.getElementById("myCanvas"); 37 // var ctx=c.getContext("2d"); 38 // ctx.font="20px Arial"; 39 // ctx.fillText("HELLO WORD",10,50); 40 41 // 虚线文本绘制： 42 // var c=document.getElementById("myCanvas"); 43 // var ctx=c.getContext("2d"); 44 // ctx.font="20px Arial"; 45 // ctx.strokeText("HELLO WORD",40,60); 46 47 // 渐变： 48 // 线性渐变： 49 // // 创建渐变： 50 // var c=document.getElementById("myCanvas"); 51 // var ctx=c.getContext("2d"); 52 // var grd=ctx.createLinearGradient(0,0,200,0); 53 // grd.addColorStop(0,"skyblue"); 54 // grd.addColorStop(1,"pink"); 55 // // 填充渐变： 56 // ctx.fillStyle=grd; 57 // ctx.fillRect(10,10,150,80); 58 59 // 径向渐变： 60 // // 创建渐变： 61 // var c=document.getElementById("myCanvas"); 62 // var ctx=c.getContext("2d"); 63 // var grd=ctx.createRadialGradient(75,50,5,90,60,100); 64 // grd.addColorStop(0,"skyblue"); 65 // grd.addColorStop(1,"pink"); 66 // // 填充渐变: 67 // ctx.fillStyle=grd; 68 // ctx.fillRect(10,10,150,80); 69 70 // 图像画布：(drawImage(img,x,y)) 71 // var c=document.getElementById("myCanvas"); 72 // var ctx=c.getContext("2d"); 73 // var img=document.getElementById("scream"); 74 // img.onload=function() { 75 // ctx.drawImage(img,10,10); 76 // } 77 78 </script> 79 </body> 80 </html>