Canvas標簽基礎
阿新 • • 發佈：2017-05-23
三角形 asc color html tex getc con store ext
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CANVAS</title> </head> <body> <canvas height="800" width="800" style="background: pink" id="canvas1"> 您的當前瀏覽器版本不支持canvas標簽 </canvas> <script type="text/javascript"> //獲取標簽元素 var ext = document.getElementById("canvas1"); // alert(ext) //創建環境 var cxt=ext.getContext("2d"); //畫直線 cxt.beginPath(); cxt.lineWidth=10; cxt.strokeStyle="#ff9900"; cxt.moveTo(20,20); cxt.lineTo(100,20); cxt.stroke(); cxt.closePath(); //畫圓 空心 cxt.beginPath(); cxt.lineWidth=3; cxt.strokeStyle="green"; cxt.arc(70,100,50,0,360,false); cxt.stroke(); cxt.closePath();//畫圓 實心 cxt.beginPath(); cxt.lineWidth=3; cxt.fillStyle="yellow"; cxt.arc(200,100,50,0,360,false); cxt.fill(); cxt.stroke(); cxt.closePath(); //畫矩形 空心 cxt.beginPath(); // cxt.rect(10,200,60,60); // cxt.stroke();下面一句代碼就是簡寫，推薦用下面的寫法 cxt.strokeRect(10,200,60,60); cxt.closePath(); //畫矩形 實心 cxt.beginPath(); // cxt.rect(80,200,60,60); // cxt.fill();下面一句代碼就是簡寫，推薦用下面的寫法 cxt.fillRect(80,200,60,60); cxt.closePath(); //添加文本 cxt.beginPath(); cxt.font="40px 宋體"; cxt.fillText("無兄弟",20,300); cxt.lineWidth=1; cxt.strokeText("無兄弟",20,350); cxt.closePath(); //將圖片畫到畫布上面去 谷歌不支持 var img=new Image(); img.src="0.jpg"; cxt.drawImage(img,20,400,400,300); //畫三角形 cxt.beginPath(); cxt.moveTo(200,20); cxt.lineTo(300,20); cxt.lineTo(350,50); cxt.lineTo(200,20); cxt.closePath(); cxt.fill(); cxt.stroke(); //旋轉一個字段 cxt.save(); cxt.translate(20,20); cxt.rotate(-60*Math.PI/180); cxt.beginPath(); cxt.lineWidth=10; cxt.moveTo(0,0); cxt.lineTo(20,100); cxt.stroke(); cxt.closePath(); cxt.restore(); //旋轉圖片 cxt.save(); cxt.translate(20,400); cxt.rotate(-10*Math.PI/180); var img =new Image(); img.src="0.jpg"; cxt.drawImage(img,0,0,400,300); cxt.restore(); </script> </body> </html>
Canvas標簽基礎