使用closePath()閉合圖形
首先我們用最普通的方法繪制一個(gè)矩形。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>繪制矩形</title>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
- 你的瀏覽器居然不支持Canvas?!趕快換一個(gè)吧?。?
- </canvas>
- </div>
-
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
- var context = canvas.getContext("2d");
-
- context.beginPath();
- context.moveTo(150,50);
- context.lineTo(650,50);
- context.lineTo(650,550);
- context.lineTo(150,550);
- context.lineTo(150,50);
- context.lineWidth = 5;
- context.strokeStyle = "black";
- context.stroke();
-
- }
- </script>
- </body>
- </html>
- </body>
- </html>
運(yùn)行結(jié)果:
乍一看沒啥問題,但是視力好的童鞋已經(jīng)發(fā)現(xiàn)了,最后一筆閉合的時(shí)候有問題,導(dǎo)致左上角有一個(gè)缺口。這種情況是設(shè)置了lineWidth導(dǎo)致的。如果默認(rèn)1筆觸的話,是沒有問題的。但是筆觸越大,線條越寬,這種缺口就越明顯。那么這種情況該怎么避免呢?
標(biāo)題已經(jīng)劇透了,使用clothPath()閉合圖形。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>繪制矩形</title>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
- 你的瀏覽器居然不支持Canvas?!趕快換一個(gè)吧??!
- </canvas>
- </div>
-
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
- var context = canvas.getContext("2d");
-
- context.beginPath();
- context.moveTo(150,50);
- context.lineTo(650,50);
- context.lineTo(650,550);
- context.lineTo(150,550);
- context.lineTo(150,50);
- context.closePath();
-
- context.lineWidth = 5;
- context.strokeStyle = "black";
- context.stroke();
-
- }
- </script>
- </body>
- </html>
- </body>
- </html>
運(yùn)行結(jié)果:
這個(gè)例子結(jié)合上節(jié)課的講解,我們知道了繪制路徑的時(shí)候需要將規(guī)劃的路徑使用beginPath()與closePath()包裹起來。當(dāng)然,最后一筆可以不畫出來,直接使用closePath(),它會(huì)自動(dòng)幫你閉合的。(所以如果你不想繪制閉合圖形就不可以使用closePath())
給矩形上色
這里我們要介紹一個(gè)和stroke()同等重要的方法fill()。和當(dāng)初描邊一樣,我們在填色之前,也要先用fillStyle屬性選擇要填充的顏色。
比如我們要給上面的矩形涂上黃色,可以這樣寫。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>繪制矩形</title>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
- 你的瀏覽器居然不支持Canvas?!趕快換一個(gè)吧!!
- </canvas>
- </div>
-
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
- var context = canvas.getContext("2d");
-
- context.beginPath();
- context.moveTo(150,50);
- context.lineTo(650,50);
- context.lineTo(650,550);
- context.lineTo(150,550);
- context.lineTo(150,50);
- context.closePath();
-
- context.fillStyle = "yellow";
- context.lineWidth = 5;
- context.strokeStyle = "black";
-
- context.fill();
- context.stroke();
-
- }
- </script>
- </body>
- </html>
- </body>
- </html>
-
運(yùn)行結(jié)果:
這里需要注意的是一個(gè)良好的編碼規(guī)范。因?yàn)橹罢f過了Canvas是基于狀態(tài)的繪制,只有調(diào)用了stroke()和fill()才確定繪制。所以我們要把這兩行代碼放在最后,其余的狀態(tài)設(shè)置的代碼放在它們之前,將狀態(tài)設(shè)置與確定繪制的代碼分隔開。增強(qiáng)代碼的可讀性。
封裝繪制方法
大家一定發(fā)現(xiàn)了,繪制矩形其實(shí)都是這樣的四筆,我們每次用這種笨方法畫矩形都要畫這四筆有多麻煩,如果我們要花10個(gè)矩形?100個(gè)?1000個(gè)?都這樣寫,代碼會(huì)臃腫,復(fù)用性很低。這里,我們可以使用JavaScript封裝這些方法。我們知道,一個(gè)矩形可以由它的左上角坐標(biāo)和其長寬唯一確定。
JavaScript函數(shù)
這里我們介紹一下JavaScript函數(shù)。如果有基礎(chǔ)的同學(xué)可以跳過這一大段,直接看后面的。
JavaScript 和 ActionScript 語言的函數(shù)聲明調(diào)用一樣,都是編程語言中最簡單的。
函數(shù)的作用
函數(shù)的作用,可以寫一次代碼,然后反復(fù)地重用這個(gè)代碼。如:我們要完成多組數(shù)和的功能。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var sum;
- sum = 3+2;
- alert(sum);
-
- sum=7+8 ;
- alert(sum);
-
- ....
-
如果要實(shí)現(xiàn)8組數(shù)的和,就需要16行代碼,實(shí)現(xiàn)的越多,代碼行也就越多。所以我們可以把完成特定功能的代碼塊放到一個(gè)函數(shù)里,直接調(diào)用這個(gè)函數(shù),就省去重復(fù)輸入大量代碼的麻煩。
使用函數(shù)完成:
JavaScript Code復(fù)制內(nèi)容到剪貼板
- function add2(a,b){
- sum = a + b;
- alert(sum);
- }
-
- add2(3,2);
- add2(7,8);
- ....
-
定義函數(shù)
如何定義一個(gè)函數(shù)呢?看看下面的格式:
JavaScript Code復(fù)制內(nèi)容到剪貼板
- function 函數(shù)名( )
- {
- 函數(shù)體;
- }
function定義函數(shù)的關(guān)鍵字,“函數(shù)名”你為函數(shù)取的名字,“函數(shù)體”替換為完成特定功能的代碼。
函數(shù)調(diào)用
函數(shù)定義好后,是不能自動(dòng)執(zhí)行的,需要調(diào)用它,直接在需要的位置寫函數(shù)名。一般有兩種方式:
第一種情況:在<script>標(biāo)簽內(nèi)調(diào)用。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <script>
- function tcon()
- {
- alert("恭喜你學(xué)會(huì)函數(shù)調(diào)用了!");
- }
- tcon();
- </script>
第二種情況:在HTML文件中調(diào)用,如通過點(diǎn)擊按鈕后調(diào)用定義好的函數(shù)。
這種情況以后用到了再說。
有參數(shù)的函數(shù)
格式如下:
JavaScript Code復(fù)制內(nèi)容到剪貼板
- function 函數(shù)名(參數(shù)1,參數(shù)2)
- {
- 函數(shù)代碼
- }
注意:參數(shù)可以多個(gè),根據(jù)需要增減參數(shù)個(gè)數(shù)。參數(shù)之間用(逗號(hào),)隔開。
按照這個(gè)格式,函數(shù)實(shí)現(xiàn)任意兩個(gè)數(shù)的和應(yīng)該寫成:
JavaScript Code復(fù)制內(nèi)容到剪貼板
- function add2(x,y)
- {
- sum = x + y;
- document.write(sum);
- }
x和y則是函數(shù)的兩個(gè)參數(shù),調(diào)用函數(shù)的時(shí)候,我們可通過這兩個(gè)參數(shù)把兩個(gè)實(shí)際的加數(shù)傳遞給函數(shù)了。
例如,add2(3,4)會(huì)求3+4的和,add2(60,20)則會(huì)求出60和20的和。
返回值函數(shù)
JavaScript Code復(fù)制內(nèi)容到剪貼板
- function add2(x,y)
- {
- sum = x + y;
- return sum;
- }
這里的return和其他語言中的一樣,但是在JS或者AS等弱類型語言中,返回值類型是不需要寫到函數(shù)聲明里的。
至此,我們把JavaScript函數(shù)也順便系統(tǒng)的說了一下。下面回到正題~
我們也可以封裝一下我們的矩形,代碼如下:
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>封裝繪制矩形方法</title>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
- 你的瀏覽器居然不支持Canvas?!趕快換一個(gè)吧!!
- </canvas>
- </div>
-
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
- var context = canvas.getContext("2d");
-
- drawRect(context, 150, 50, 50, 50, "red", 5, "blue");
- drawRect(context, 250, 50, 50, 50, "green", 5, "red");
- drawRect(context, 350, 50, 50, 50, "yellow", 5, "black");
- }
-
- function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){
- cxt.beginPath();
- cxt.moveTo(x, y);
- cxt.lineTo(x + width, y);
- cxt.lineTo(x + width, y + height);
- cxt.lineTo(x, y + height);
- cxt.lineTo(x, y);
- cxt.closePath();
-
- cxt.lineWidth = borderWidth;
- cxt.strokeStyle = borderColor;
- cxt.fillStyle = fillColor;
-
- cxt.fill();
- cxt.stroke();
- }
- </script>
- </body>
- </html>
- </body>
- </html>
運(yùn)行結(jié)果:
使用rect()方法繪制矩形
猶豫繪制矩形是常用的方法,所以在Canvas API中已經(jīng)幫我們封裝好了一個(gè)繪制矩形的方法——rect()。這個(gè)方法接收4個(gè)參數(shù)x, y, width, height,實(shí)際調(diào)用時(shí)也就是
JavaScript Code復(fù)制內(nèi)容到剪貼板
- context.rect(x,y,width,height);
基于此,我們幫剛才封裝的方法優(yōu)化一下。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){
- cxt.beginPath();
- cxt.rect(x, y, width, height);
-
-
- cxt.lineWidth = borderWidth;
- cxt.strokeStyle = borderColor;
- cxt.fillStyle = fillColor;
-
- cxt.fill();
- cxt.stroke();
- }
調(diào)用封裝方法,繪制魔性圖像
來個(gè)有魔性的圖像~
好,我們就拿它開刀,練練手,給咱剛封裝好的方法活動(dòng)活動(dòng)筋骨。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>繪制魔性圖形</title>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
- 你的瀏覽器居然不支持Canvas?!趕快換一個(gè)吧!!
- </canvas>
- </div>
-
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
- var context = canvas.getContext("2d");
-
- context.beginPath();
- context.rect(0, 0, 800, 600);
- context.fillStyle = "#AA9033";
-
- context.fill();
-
- context.beginPath();
- for(var i=0; i<=20; i++){
- drawWhiteRect(context, 200 + 10 * i, 100 + 10 * i, 400 - 20 * i, 400 - 20 * i);
- drawBlackRect(context, 205 + 10 * i, 105 + 10 * i, 390 - 20 * i, 390 - 20 * i);
- }
-
- context.beginPath();
- context.rect(395, 295, 5, 5);
- context.fillStyle = "black";
- context.lineWidth = 5;
-
- context.fill();
- context.stroke();
- }
-
- function drawBlackRect(cxt, x, y, width, height){
- cxt.beginPath();
- cxt.rect(x, y, width, height);
-
- cxt.lineWidth = 5;
- cxt.strokeStyle = "black";
-
- cxt.stroke();
- }
-
- function drawWhiteRect(cxt, x, y, width, height){
- cxt.beginPath();
- cxt.rect(x, y, width, height);
-
- cxt.lineWidth = 5;
- cxt.strokeStyle = "white";
-
- cxt.stroke();
- }
- </script>
- </body>
- </html>
- </body>
- </html>
運(yùn)行結(jié)果:
是不是很有魔性?是不是非常的酷?這段代碼就不花篇幅解釋了,大家自己課下琢磨琢磨,也可以嘗試著用已經(jīng)學(xué)過的知識(shí)去繪制一個(gè)酷酷的圖像。這節(jié)課內(nèi)容有點(diǎn)多,其實(shí)也只是介紹了四個(gè)屬性和方法——closePath()、fillStyle、fill()、rect(),還有一個(gè)擴(kuò)展的JavaScript函數(shù)講解。
Canvas實(shí)現(xiàn)圖片圓角效果
本規(guī)則適用于各種Canvas繪制的規(guī)則或不規(guī)則圖形。
Canvas實(shí)現(xiàn)圖片圓角的關(guān)鍵是使用“紋理填充”。
Canvas中有個(gè)名為createPattern的方法,可以讓已知尺寸的圖片元素轉(zhuǎn)換成紋理對象,作填充用。
舉個(gè)板栗,如果實(shí)現(xiàn)名為test.jpg的圖片圓形效果,大小100px * 100px, 則主要JS代碼如下:
JavaScript Code復(fù)制內(nèi)容到剪貼板
-
- var canvas = document.querySelector("#canvas"), image = new Image();
- var context = canvas.getContext("2d");
-
- image.onload = function() {
-
- var pattern = context.createPattern(image, "no-repeat");
-
- context.arc(50, 50, 50, 0, 2 * Math.PI);
-
- context.fillStyle = pattern;
- context.fill();
- };
- image.src = "test.jpg";
讓Canvas上下文的fillStyle屬性值等于這個(gè)紋理對象就可以了。
Canvas自帶的矩形繪制API是不帶圓角屬性的,因此,demo中的圓角矩形使用了自定義方法。我簡單瞅了瞅,要實(shí)現(xiàn)垂直、水平方向不同圓角大小略折騰,本著示意的目的,就沒大動(dòng)干戈,所以demo的圓角是對稱的。