h5 canvas 畫圖
h5 canvas 畫圖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $().ready(function () { var $c=$("#cans"); $c.bind('mousemove', function (event) { var x=event.clientX; var y=event.clientY; $("#res").text("坐標：x軸"+x+"坐標：y軸"+y); }); // 畫矩形 var d=$c.get(0).getContext("2d"); //2d d.fillStyle="red"; //顏色 d.fillRect(0,0,100,100); // 矩形 d.fillStyle="rgba(0,0,255,0.5)"; //最後一個是程春明度 d.fillRect(200,0,100,100); // 畫線 d.moveTo(110,110); //起始位置 d.lineTo(130,130); //終止位置 d.lineTo(155,120); // 如果沒有再次設置起始位置則從終止位置繼續畫 d.stroke(); // 結束圖形 // 圓 d.fillStyle="blue"; d.beginPath(); // 從新開始畫，防止 衝突重疊 d.arc(100,200,30,0,Math.PI*2,true); // x y 坐標 半徑30 d.closePath(); // 結束畫布，防止衝突重疊 d.fill(); // 結束渲染 // 顏色漸變 var grd= d.createLinearGradient(250,250,375,250); // 顏色漸變的起始和終止坐標 grd.addColorStop(0,'red'); // 0 表示起點 0.1 0.2.。。1 表示終點 grd.addColorStop(0.8,'green'); grd.addColorStop(1,'blue'); d.fillStyle=grd; d.fillRect(250,250,375,250); // 設置色塊 // 載入圖形 chrome 不支持 var img=new Image() img.src="../img/logo.png" d.drawImage(img,200,30); }); </script> </head> <body> <canvas id="cans" width="500" height="500">瀏覽器不支持canvas</canvas> <div id="res"></div> </body> </html>
