1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas</title> 6 <style> 7 body{ 8 margin:0;padding:0; 9 } 10 </style> 11 </head> 12 <body> 13 <canvas id="myCanvas" width="1080px" height="520px" style="border:1px dashed #000;" onmousemove="getCoordinates(event)" onmouseout="clearCoordinates()">你的浏览器不支持HTML5</canvas> 14 <div id="texts"></div> 15 </body> 16 <script type="text/javascript"> 17 //获取鼠标在canvas画布上的坐标，浏览器窗口左上角为原点 18 function getCoordinates(e){ 19 var x = e.clientX; 20 var y = e.clientY; 21 document.getElementById("texts").innerHTML = "Coordinates:("+ x +","+y+")"; 22 } 23 function clearCoordinates(){ 24 document.getElementById("texts").innerHTML = ""; 25 } 26 27 var c = document.getElementById("myCanvas"); 28 var cxt = c.getContext("2d"); 29 //画一个宽100px，高150px的矩形 30 cxt.beginPath(); 31 cxt.rect(0,0,100,150); 32 cxt.fillStyle="#ff0000"; 33 cxt.fill(); 34 cxt.closePath(); 35 36 //画一个三角形 37 cxt.beginPath(); 38 cxt.moveTo(110,0); 39 cxt.lineTo(210,150); 40 cxt.lineTo(110,150); 41 cxt.lineTo(110,0); 42 cxt.stroke(); 43 cxt.closePath(); 44 45 //画一个半圆 46 cxt.beginPath(); 47 cxt.arc(300,100,50,Math.PI,Math.PI*2,true); 48 cxt.fillStyle = "#00ff00"; 49 cxt.fill(); 50 cxt.closePath(); 51 52 //渐变 53 详见HTML5 Canvas进阶（一）：渐变，透明，移动，旋转，缩放 54 55 /* 56 cxt.beginPath(); 57 cxt.arc(75,75,50,0,Math.PI*2,true); // 绘制 58 cxt.moveTo(110,75); 59 cxt.arc(75,75,35,0,Math.PI,false); // 口(顺时针) 60 cxt.moveTo(65,65); 61 cxt.arc(60,65,5,0,Math.PI*2,true); // 左眼 62 cxt.moveTo(95,65); 63 cxt.arc(90,65,5,0,Math.PI*2,true); // 右眼 64 cxt.stroke(); 65 */ 66 // 二次贝尔赛曲线 67 cxt.beginPath(); 68 cxt.moveTo(400,75); 69 cxt.quadraticCurveTo(400,50,450,50); 70 cxt.quadraticCurveTo(500,50,500,75); 71 cxt.quadraticCurveTo(500,100,450,100); 72 cxt.quadraticCurveTo(450,125,415,125); 73 cxt.quadraticCurveTo(435,125,435,100); 74 cxt.quadraticCurveTo(400,100,400,75); 75 cxt.stroke(); 76 cxt.closePath(); 77 78 /* // 封装的一个用于绘制圆角矩形的函数. 79 80 function roundedRect(ctx,x,y,width,height,radius){ 81 cxt.beginPath(); 82 cxt.moveTo(x,y+radius); 83 cxt.lineTo(x,y+height-radius); 84 cxt.quadraticCurveTo(x,y+height,x+radius,y+height); 85 cxt.lineTo(x+width-radius,y+height); 86 cxt.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); 87 cxt.lineTo(x+width,y+radius); 88 cxt.quadraticCurveTo(x+width,y,x+width-radius,y); 89 cxt.lineTo(x+radius,y); 90 cxt.quadraticCurveTo(x,y,x,y+radius); 91 cxt.stroke(); 92 }*/ 93 94 95 96 97 </script> 98 </html>