我的啟蒙--HTML5 第三章 Canvas
阿新 • • 發佈：2017-08-19
上下文 javascrip blog 畫筆 str ava head tro top
canvas
基本用法
要使用canvas元素，必須設置其width和height屬性！並且需要添加一些樣式才能在頁面上看見。
2d上下文：要在canvas上畫圖，需要取得繪圖上下文(2d)。
通過canvas元素調用getContext（）方法並傳入上下文的名字“2d”，就可以獲取到2d上下文對象。
通過2d上下文對象調用相關的API就可以在canvas上肆意繪畫。
Canvas繪圖- JavaScript 來繪制圖像
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：
<canvasid="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
全部屬性和寫法如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 畫筆大小： <button>粗</button> <button>中</button> <button>細</button> <button>橡皮</button> <button>清屏</button> <input type="color" id="col" value="#e44444" /><br /> <canvas id="myCanvas" width="900" height="550" style="border: 1px solid red; "></canvas> <script type="text/javascript"> drow(); function drow(){ var can = document.getElementById("myCanvas");//聲明一個變量 if(can.getContext){ var cd = can.getContext("2d");//聲明2d環境 var but = document.getElementsByTagName("button"); var a = 1; var b = 1; but[0].onclick = function(){ a=10;//這裏是第一個畫筆 } but[1].onclick = function(){ a=5; } but[2].onclick = function(){ a=1; } but[3].onclick = function(){ b+=1 } but[4].onclick = function(){ cd.clearRect(0,0,900,550); } can.onmousedown = function(ev){ var x = ev.clientX-can.offsetLeft; var y = ev.clientY-can.offsetTop; cd.beginPath(); cd.moveTo(x,y); cd.lineWidth = a; can.onmousemove = function(ev){ if (b%2 == 1) { var nex = ev.clientX-can.offsetLeft;//移動後的新點 var ney = ev.clientY-can.offsetTop; cd.lineTo(nex,ney); cd.strokeStyle = col.value; cd.stroke(); but[3].innerHTML = "橡皮" } else{ but[3].innerHTML = "鉛筆" var nex = ev.clientX-can.offsetLeft;//移動後的新點 var ney = ev.clientY-can.offsetTop; cd.clearRect(nex,ney,10,10); } } can.onmouseup = function(){ can.onmousemove = null; } } } } </script> </body> </html>
謹記當初奮鬥的自己,是他讓現在的自己,享受美好, 敬給還在奮鬥的你們,望與君共勉.
我的啟蒙--HTML5 第三章 Canvas