繪畫矩形、矩形框、圓、圓環、圓圈~
<canvas class="myCanvas" width="500" height="500"></canvas><!--定義寬高只能在行內定義，否則畫的圖會與你想象的不一樣哦，不信可以試試--> <script> var c = document.getElementsByClassName('myCanvas')[0];//獲取節點 var ctx = c.getContext('2d');//定義節點的canvas，之后就通過getContext進行canvas的繪制 /*矩形*/ ctx.fillStyle = 'gray';//定義填充樣式 ctx.strokeStyle = 'green';//定義線性樣式 ctx.lineWidth = '10';//定義線性的線寬，寬是從矩形框向內外兩邊同時加粗的 ctx.fillRect(100,50,100,100);//定義面性矩形[這四個參數分別是（橫坐標，縱坐標，寬，高）]{這是灰色的矩形} ctx.strokeRect(300,50,100,100);//定義線性矩形[這四個參數分別是（橫坐標，縱坐標，寬，高）]{這是綠色的矩形框} ctx.rect(100,200,100,100);//定義矩形（包括面性或者線性） ctx.fill();ctx.stroke();//定義到底是線性還是面性，線面性上單獨的在上面已經有了，線面性是定義在同個矩形就是灰色矩形加個綠色的邊框 /*圓*/ ctx.beginPath();//這里可以理解為另外起筆，如果忽略這個步驟那么下面的樣式就會繼承上面的，所以最好不要忽略 ctx.fillStyle = 'blue';//定義填充樣式 ctx.lineWidth = '10';//定義線性的線寬，寬是從圓圈向內外兩邊同時加粗的 ctx.arc(150,400,50,0,2*Math.PI);//定義圓[這五個參數分別是（橫坐標，縱坐標，半徑，起始的點(弧度)，結束的點(弧度)）] ctx.fill();//定義圓為面性即藍色圓面 ctx.beginPath();//另外起筆 ctx.strokeStyle = 'red';//定義線性的樣式 ctx.lineWidth = '10';//定義線性的線寬，寬是從圓圈向內外兩邊同時加粗的 ctx.arc(350,400,50,0,2*Math.PI);//定義圓[這五個參數分別是（橫坐標，縱坐標，半徑，起始的點(弧度)，結束的點(弧度)）] ctx.stroke();//定義圓為線性即紅色圓圈或者圓環 ctx.beginPath();//另外起筆 ctx.fillStyle = 'blue';//定義填充樣式 ctx.strokeStyle = 'red';//定義線性的樣式 ctx.lineWidth = '10';//定義線性的線寬，寬是從圓圈向內外兩邊同時加粗的 ctx.arc(350,250,50,0,2*Math.PI);//定義圓[這五個參數分別是（橫坐標，縱坐標，半徑，起始的點(弧度)，結束的點(弧度)）] ctx.stroke();ctx.fill();//同一坐標，同一半徑組成了一個同心圓 </script>
寫字並且放置字體的位置
以下代碼所展現的樣式是文字在頂部居中：
<canvas id="myCanvas" width="500px" height="500px"></canvas><!--定義寬高只能在行內定義，否則畫的圖會與你想象的不一樣哦，不信可以試試-->
<script> var c = document.getElementById('myCanvas');//獲取節點 var ctx = c.getContext('2d');//定義節點的canvas，之后就通過getContext進行canvas的繪制 ctx.beginPath(); /*水平居中*/ // ctx.textAlign = 'start';//這是以橫坐標為250(因為下面橫坐標為250)為基線來使參考線在文字的右邊 ctx.textAlign = 'center';//這是以橫坐標為參考線為參考線來使參考線在文字的正中間 // ctx.textAlign = 'end';//這是以橫坐標為參考線為參考線來使參考線在文字的右邊 /*垂直居中*/ // ctx.textBaseline = 'top';//這是以縱坐標為參考線使參考線在文字的上面 ctx.textBaseline = 'middle';//這是以縱坐標為參考線使參考線在文字的正中間 // ctx.textBaseline = 'bottom';//這是以縱坐標為參考線使參考線在文字的下面 ctx.fillStyle = 'rgb(182,194,154)';//定義填充樣式這三個參數為r:紅,g:綠,b:藍，即（紅，綠，藍） ctx.strokeStyle = 'rgb(220,87,18)';//定義線性樣式 ctx.font = 'italic bolder 20px arial';//定義文本字體這四個參數分別為（斜體，加粗，字體大小(必須帶單位)，微軟雅黑） ctx.fillText('Hello world!',250,20);//這是填充性文本,因為20是字體的大小，所以設置20是是標准的在頂部，三個參數分別為（內容，橫坐標，縱坐標）[字體的左下角為（0,0）] // ctx.strokeText('你好世界！',0,250);//這是填充性文本三個參數分別為（內容，橫坐標，縱坐標）[字體的左下角為（0,0）] // ctx.beginPath();//提筆另起 ctx.strokeStyle = 'red';//定義線性樣式 ctx.moveTo(250,0);/*定義起始位置*/ctx.lineTo(250,500);//定義結束位置--"Hello world!"的橫向參考線 ctx.moveTo(0,20);/*定義起始位置*/ctx.lineTo(500,20);//定義結束位置--"Hello world!"的縱向參考線 ctx.stroke();//選擇線性方式 </script>
以下代碼則文本在文本框的中心位置：
<canvas id="myCanvas" width="500px" height="500px"></canvas><!--定義寬高只能在行內定義，否則畫的圖會與你想象的不一樣哦，不信可以試試-->
<script> var c = document.getElementById('myCanvas');//獲取節點 var ctx = c.getContext('2d');//定義節點的canvas，之后就通過getContext進行canvas的繪制 ctx.beginPath(); /*水平居中*/ // ctx.textAlign = 'start';//這是以橫坐標為250(因為下面橫坐標為250)為基線來使參考線在文字的右邊 ctx.textAlign = 'center';//這是以橫坐標為參考線為參考線來使參考線在文字的正中間 // ctx.textAlign = 'end';//這是以橫坐標為參考線為參考線來使參考線在文字的右邊 /*垂直居中*/ // ctx.textBaseline = 'top';//這是以縱坐標為參考線使參考線在文字的上面 ctx.textBaseline = 'middle';//這是以縱坐標為參考線使參考線在文字的正中間 ctx.fillStyle = 'rgb(182,194,154)';//定義填充樣式這三個參數為r:紅,g:綠,b:藍，即（紅，綠，藍） ctx.strokeStyle = 'rgb(220,87,18)';//定義線性樣式 ctx.font = 'italic bolder 20px arial';//定義文本字體這四個參數分別為（斜體，加粗，字體大小(必須帶單位)，微軟雅黑） ctx.beginPath();//提筆另起 ctx.strokeStyle = 'red';//定義線性樣式 ctx.moveTo(250,0);/*定義起始位置*/ctx.lineTo(250,500);//定義結束位置--"Hello world!"的橫向參考線 ctx.stroke();//選擇線性方式 // ctx.beginPath();//提筆另起 ctx.strokeStyle = 'black';//定義線性樣式 ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.moveTo(0,250);/*定義起始位置*/ctx.lineTo(500,250);//定義結束位置--"你好世界"的橫向參考線 ctx.stroke();//選擇線性方式 ctx.strokeText('你好世界！',250,250);//黑空星的你好世界在文本框的的正中新 </script>
用線段來畫一個大箭頭
<canvas id="myCanvas2" width="400px" height="400px"></canvas> <script> var myCanvas2 = document.getElementById('myCanvas2');//獲取節點 var ctx2 = myCanvas2.getContext('2d');//平面編輯 ctx2.beginPath();//開始 ctx2.strokeStyle = '#000';//線性樣式為黑色 ctx2.lineJoin = 'round';//圓角 這是每個接點顯得比較圓潤的效果 // ctx2.lineJoin = 'miter';//默認 這是默認的效果，顯得比較尖 // ctx2.lineJoin = 'bevel';//切角 這是切角的效果，顯得比較鈍 ctx2.lineWidth = '10';//線寬為10px var x=50,y=50;//申明變量，方便下面畫的圖平移的效果 ctx2.moveTo(0+x,150+y);//起點 ctx2.lineTo(150+x,0+y);//接點 ctx2.lineTo(300+x,150+y);//接點 ctx2.lineTo(225+x,150+y);//接點 ctx2.lineTo(225+x,300+y);//接點 ctx2.lineTo(75+x,300+y);//接點 ctx2.lineTo(75+x,150+y);//接點 ctx2.closePath();//封閉接口 ctx2.stroke();//線性繪畫 </script>
運用圖片
<canvas width="300px" height="300px" id="myCanvas"> <img src="sight.jpg" alt="" id="canvasImg"/><!--這里添加圖片是添加不上的--> </canvas> <script> var c = document.getElementById('myCanvas');//獲取canvas的節點 var ctx = c.getContext('2d');//平面繪畫 var canvasImg = document.getElementById('canvasImg');//獲取img的節點 var img = new Image();//獲取圖片的方法 img.src = 'sight.jpg';//圖片的路徑 canvasImg.onload = function(){//頁面加載完成時 ctx.drawImage(canvasImg,0,0,300,300);//添加圖片[圖片，橫坐標，縱坐標，寬帶，高度] }
</script>
制作動態下雨效果
<canvas class="myCanvas" height="500px" width="500px"style="background: #ECF3F8;display: block;margin: auto;"></canvas> <script> window.onload = function(){//頁面加載完成時執行 var c = document.getElementsByClassName('myCanvas')[0];//獲取節點 var ctx = c.getContext('2d');//平面繪畫 ctx.fillStyle = ('rgba(36,196,191,0.8)');//填充樣式的rgba即顏色[紅，綠，藍，alpha(透明度0-1之間的數)] function myX() {//聲明橫坐標即雨點的位置函數 window.requestAnimationFrame(myX);//使頻率和電腦一樣，這里也可以用setInterval var x = 0, y = 0,h = 0;//聲明變量 x = Math.floor(Math.random() * 500);//橫坐標獲取隨機數數 h = Math.floor(Math.random()*30+10);//雨點的長度獲取隨機數 function myY() {//申明縱坐標即雨下的函數 ctx.beginPath();//開始 y += 8;//縱坐標自加8 ctx.fillRect(x, y, 2, h);//雨點的位置即長度[下雨的位置，向下落的動態，雨的寬度] window.requestAnimationFrame(myY);//使頻率和電腦一樣防止雨滴出現閃爍的原因，這里一定不能用setInterval } myY();//調用函數，與window.requestAnimationFrame(myY);形成遞歸 ctx.clearRect(0, 0, 500, 500);//清除雨滴 } myX();//調用函數，與window.requestAnimationFrame(myX);形成遞歸 } </script>
制作畫板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>painting</title> </head> <body> <canvas class="myCanvas" width="500px" height="500px" style="display: block;margin: auto;background: #ECF3F8;cursor: pointer"></canvas> <input type="color" id="color"/> <input type="range" id="range" min="1" max="100" value="5"/> <span id="show"></span> </body> <script> window.onload = function(){ var c = document.getElementsByClassName('myCanvas')[0];//獲取節點 var ctx = c.getContext('2d');//這里面只能是2d表示在二維的畫布里寫的意思 var range = document.getElementById('range');//獲取節點 var show = document.getElementById('show');//獲取節點 function change(){//這是改變畫筆粗細的函數 show.innerText= range.value;//span標簽里的值即為range標簽里選擇的大小 requestAnimationFrame(change);//span標簽里的數字隨着range的改變而改變，這是遞歸 }change();//調用 var moveNum = false;//聲明變量 c.onmousedown = function (e) {//鼠標按下事件 var e = e || event;//解決兼容問題 var x = e.clientX - c.offsetLeft;//找到鼠標的橫坐標 var y = e.clientY - c.offsetTop;//鼠標的縱坐標 ctx.beginPath();//起筆 ctx.lineWidth = range.value;//線條的粗細 var color = document.getElementById('color');//獲取節點 var val = color.value;//獲取節點的值 ctx.strokeStyle = val;//將顏色的值賦給線條樣式 ctx.moveTo(x,y);//畫筆的起點位置 moveNum = true;//令moveNum等於true， }; c.onmousemove = function(){//鼠標移動事件 var e = e || event;//兼容問題 var x = e.clientX - c.offsetLeft; var y = e.clientY - c.offsetTop; if(moveNum){//如果move為true即為有值的情況下也就是說必須鼠標按下過后才能執行操作 ctx.lineTo(x,y);//終點，也就是鼠標彈起的情況就停止了繪畫 ctx.stroke();//采用線性的方式繪畫 } }; document.onmouseup = function(){//鼠標彈起事件 return moveNum = false;//返回moveNum為false即為無值得情況，則什么也不做即結束繪畫 }; } </script> </html>
制作水波效果
<canvas class="myCanvas" height="500px" width="500px"style="background: #ECF3F8;display: block;margin: auto;"></canvas> <script> window.onload = function(){//頁面加載完成后執行 var c = document.getElementsByClassName('myCanvas')[0];//獲取節點 var ctx = c.getContext('2d');//平面繪畫 c.addEventListener('click',function(e){//點擊事件 var e = e || event;//瀏覽器兼容問題 var x = e.clientX - c.offsetLeft;//獲取鼠標橫坐標 var y = e.clientY - c.offsetTop;//獲取鼠標縱坐標 var addR = 0;//聲明變量讓半徑從0開始 var alpha = 1;//申明變量設置透明度 function recursion(){//申明函數 ctx.fillStyle = 'rgba(36,196,191,'+alpha+')';//填充樣式 addR += 1;//半徑每次自加1 alpha -=0.01;//透明度每次自減0.01 ctx.beginPath();//開始 ctx.arc(x,y,addR,0,2*Math.PI);//畫圓（水波）[鼠標點擊的橫坐標，鼠標點擊的縱坐標，圓的起始位置，圓的結束位置] ctx.fill();//填充類型 /*if(alpha <= 0){ ctx.clearRect(0,0,500,500);//如果這里打開的話那么你第一個點擊的水波（圓）顏色不會漸變 }*/ if(alpha >= 0){ window.requestAnimationFrame(recursion);//和電腦使用相同的頻率，防止水波最大時閃動消失 } } recursion();//調用函數，與window.requestAnimationFrame(recursion);形成遞歸 }); function clear(){//聲明清除水波的函數 ctx.clearRect(0,0,500,500);//清除水波 window.requestAnimationFrame(clear);//和電腦使用相同的頻率，防止水波最大時閃動消失，這里可以解決第一個點擊的水波（圓）顏色不會漸變的問題 } clear();//調用函數，與window.requestAnimationFrame(clear);形成遞歸 } </script>