Canvas容器:

canvas標簽用來定義圖像的容器，必須配合腳本來繪制圖像，canvas也運用于游戲開發(fā)。注意：canvas繪制圖時會出現(xiàn)線條模糊情況，這是因為顯示屏像素和canvas中定義的一個點不完全重合（相差0.5）導(dǎo)致，若要解決這個問題，就要計算canvas中0.5的坐標值。

創(chuàng)建畫布：

注意：一個頁面可以創(chuàng)建多個canvas畫布，每個畫布建議給一個id屬性方便配合腳本。

<canvas id='canvasBox' width='200' height='200'></canvas>

Canvas繪圖基本流程：

在canvas容器中繪制圖形，需要配合使用javascript腳本，具體如下：

<script>// 1.獲取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.獲取上下文（這里指獲取繪制工具）：var ctx = canvasBox.getContext('2d'); //3d技術(shù)這里不做詳細介紹// 3.利用繪制工具配合畫筆開始繪制圖：ctx.moveTo(100, 100); //moveTo(x,y)表示畫筆開始移動的坐標ctx.lineTo(200, 200); //lineTo(x,y)表示繪制直線，坐標為直線末尾點坐標ctx.stroke(); //stroke()表示描邊，必須有這項才會顯示效果// 開始下一筆繪制：這里可以是多個不同種的繪制，lineTo()只表示繪制直線ctx.moveTo(200, 200);ctx.lineTo(200, 300);ctx.stroke();</script><script>var myCanvas = document.querySelector('canvas');var ctx = myCanvas.getContext('2d');// 平移畫布的原點：// ctx.translate(x,y)------參數(shù)表示在原有的基礎(chǔ)上移動目標點的坐標,即繪制的圖和畫布都移動（里層移動，外面容器看起來不移動）// 縮放// scale(x,y)------參數(shù)表示寬高及坐標縮放比例，畫布和圖都進行縮放了// 旋轉(zhuǎn)// rotate(angle)-----參數(shù)表示以canvas原點旋轉(zhuǎn)angle角度,// ctx.strokeRect(200,100,100,100);//一個矩形 // ctx.translate(10,20)//在原有的基礎(chǔ)上X軸移動10px，Y軸移動20px// ctx.strokeRect(200,100,50,50);//一個矩形 // ctx.strokeRect(0,0,100,100);//一個矩形 // ctx.scale(.5,.5)//對下面的矩形進行寬度和高度以及坐標的縮放// ctx.strokeRect(0,0,50,50);//一個矩形// ctx.strokeRect(300,200,100,100);//一個矩形 // ctx.rotate(Math.PI / 8)//對下面的矩形進行寬度和高度以及坐標的旋轉(zhuǎn)// ctx.strokeRect(300,200,50,50);//一個矩形var startAngle = 0;ctx.translate(150, 150);setInterval(function() {startAngle += Math.PI / 180;ctx.rotate(startAngle);ctx.strokeRect(-50, -50, 100, 100);}, 500);//更多繪制工具如下表：</script>

繪制工具：

續(xù)：
Canvas繪制圖片：

<script>// 1.獲取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.獲取上下文（這里指獲取繪制工具）：var ctx = canvasBox.getContext('2d'); //3d技術(shù)這里不做詳細介紹// 3.創(chuàng)建對象的方式在內(nèi)存中生成img對象，這里無需DOM：var image = new Image();image.src = '捕獲.PNG';// 等image加載完在處理image.onload = function() {// 這里圖片一定加載完成了，也有可能在這段代碼執(zhí)行前加載完，所以這段代碼一般放在圖片路徑的前面。// 繪制圖片的三種方式：// 第一種：傳入 3 個參數(shù)的用法：ctx.drawImage(img對象,x,y)---分別是img對象，圖片的左上角在canvas中的坐標(x,y)。// ctx.drawImage(image,0,0);// 第二種：傳入 5 個參數(shù)的用法：ctx.drawImage(img對象,x,y,w,h)---分別是img對象，圖片的左上角在canvas中的坐標(x,y)和圖片的縮放寬度w和高度h。// ctx.drawImage(image,0,0,500,400);// 第三種：傳入 9 個參數(shù)的用法：ctx.drawImage(img對象,要渲染的對象定位坐標x,要渲染的對象定位坐標y,截取對象的寬度w,截取對象的寬度h,對象在canvas中的位置定位x,對象在canvas中的位置定位y,對象縮放寬度w,對象縮放高度h)ctx.drawImage(image, 400, 400, 2000, 2000, 0, 0, 300, 200);};</script>

Canvas繪制幀動畫：

canvas繪制幀動畫的原理：利用定時器不斷改變圖片參數(shù)：

<script>// 1.獲取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.獲取上下文（這里指獲取繪制工具）：var ctx = canvasBox.getContext('2d'); //3d技術(shù)這里不做詳細介紹// 3.創(chuàng)建對象的方式在內(nèi)存中生成img對象，這里無需DOM：var image = new Image();image.src = 'image/4.png';// 4.等image加載完在處理繪制：image.onload = function() {// 第三種：傳入 9 個參數(shù)的用法：ctx.drawImage(img對象,要渲染的對象定位坐標x,要渲染的對象定位坐標y,截取對象的寬度w,截取對象的寬度h,對象在canvas中的位置定位x,對象在canvas中的位置定位y,對象縮放寬度w,對象縮放高度h)// 拿到圖片的寬度和高度：var imageWidth = image.width;var imageHeight = image.height;// 聲明一個計數(shù)器：var i = 0;// 利用定時器開啟動畫：setInterval(function() {i++;// 解決重影問題，需要每次清除canvas畫布中之前的繪制圖：ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);//開始繪制新圖片ctx.drawImage(image, 80 * i, 0, imageWidth / 4, imageHeight / 4, 300, 200, 100, 100);if (i >= 3) {i = 0;};}, 300);};</script>

Canvas漸變色：

<script>// 1.獲取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.獲取上下文（這里指獲取繪制工具）：var ctx = canvasBox.getContext('2d'); //3d技術(shù)這里不做詳細介紹// 3.定義一個漸變色：var linearGradient = ctx.createLinearGradient(10, 10, 10, 100);// 4.添加漸變的顏色：linearGradient.addColorStop(0.8, 'green');linearGradient.addColorStop(.2, 'red');// 5.設(shè)置填充顏色為上面定義的漸變色ctx.fillStyle = linearGradient;// 6.定義一個填充的矩形ctx.fillRect(10, 10, 100, 100);</script>

Canvas中曲線：

canvas中繪制曲線都是套用數(shù)學公式進行繪制的，其工具還是基礎(chǔ)工具，想要繪制復(fù)雜的圖形，那么對數(shù)學要求功底就非常高了，這里簡單介紹一下，繪制思路，如：

<script>// 1.獲取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.獲取上下文（這里指獲取繪制工具）：var ctx = canvasBox.getContext('2d'); //3d技術(shù)這里不做詳細介紹// 3.繪制曲線思路（數(shù)學功底要求）：不斷改變線條運動軌跡達到效果for (var i = 0; i < 600; i++) {var x = i;var y = Math.pow(x / 20, 2) + 30;ctx.lineTo(x, y);};// 4.描邊：ctx.stroke();</script>

Canvas面向?qū)ο罄L制餅圖：

<script>// 1.獲取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.獲取上下文（這里指獲取繪制工具）：var ctx = canvasBox.getContext('2d'); //3d技術(shù)這里不做詳細介紹// 3.以 面向?qū)ο蟮姆绞嚼L制一個餅圖：// 聲明一個函數(shù)：var PieChart = function(ctx) {// 繪制工具：this.ctx = ctx || document.querySelector('canvas').getContext('2d');// 拿到canvas的尺寸大小：this.w = this.ctx.canvas.width;this.h = this.ctx.canvas.height;// 定義圓心的坐標：this.x0 = this.w / 2 + 100;this.y0 = this.h / 2;// 定義圓的半徑：this.radius = 100;// 定義文字部分伸出去的線的長度：this.outLine = 30;// 定義說明矩形的寬度：this.rectW = 30;// 定義說明矩形的高度：this.rectH = 12;// 距離旁邊的間距：this.space = 5;};// 為 PieChart函數(shù)添加畫餅圖的方法：PieChart.prototype.drawPie = function(data) {// 解決this指向不同的問題：var that = this;// 調(diào)用下面的trans方法得到新的data數(shù)據(jù)，并用變量angleList接收：var angleList = this.trans(data);// 定義起始弧度：var begangle = 0;//遍歷angleList得到數(shù)據(jù)中的angle弧度：angleList.forEach(function(item, i) {// 定義結(jié)束弧度為endangle，endangle = 開始的角度(上一次結(jié)束的弧度) + 數(shù)據(jù)angleList中的anglevar endangle = begangle + item.angle;// 開啟新路徑：ctx.beginPath();//移動畫筆到(that.x0,that.y0)：ctx.moveTo(that.x0, that.y0);// 繪制圓的軌跡ctx.arc(that.x0, that.y0, that.radius, begangle, endangle);// 隨機的設(shè)置每個扇形的填充顏色：var colors = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`;ctx.fillStyle = colors;// 填充扇形ctx.fill();//調(diào)用drawTitle方法繪制扇形： that.drawTitle(begangle, item.angle, item.title, colors);// 調(diào)用drawDesc方法繪制說明的矩形：that.drawDesc(i, item.title);// 把結(jié)束弧度給起始弧度作為下一次繪制扇形的起始弧度begangle = endangle;});};// 為 PieChart函數(shù)添加畫文字的方法：PieChart.prototype.drawTitle = function(begAngle, angle, text, color) {// 計算伸出去的邊的長度(斜邊)：var edge = this.radius + this.outLine;// 計算伸出去的邊的終點的X的長度：var edgeX = Math.cos(begAngle + angle / 2) * edge;// 計算伸出去的邊的終點的Y的長度：var edgeY = Math.sin(begAngle + angle / 2) * edge;// 計算伸出去的邊的終點的坐標：var outX = this.x0 + edgeX;var outY = this.y0 + edgeY;// 開啟新路徑：this.ctx.beginPath();// 移動畫筆到(this.x0,this.y0)的位置：this.ctx.moveTo(this.x0, this.y0);// 繪制伸出去線的軌跡：this.ctx.lineTo(outX, outY);this.ctx.strokeStyle = color;this.ctx.font = '15px Microsoft YaHei';this.ctx.textBaseline = 'bottom';var titleWidth = this.ctx.measureText(text).width;// 判斷Math.cos(begAngle + angle /2)的正負決定水平線的方向：if (Math.cos(begAngle + angle / 2) > 0) {// 繪制伸出去線的軌跡：this.ctx.lineTo(outX + titleWidth, outY);// 開始繪制文字titlethis.ctx.textAlign = 'start'; //文本居中對齊，屬性值：left,right,center,end,startthis.ctx.fillText(text, outX, outY);} else {// 繪制伸出去線的軌跡：this.ctx.lineTo(outX - titleWidth, outY);// 開始繪制文字titlethis.ctx.textAlign = 'end'; //文本居中對齊，屬性值：left,right,center,end,startthis.ctx.fillText(text, outX, outY);};this.ctx.stroke();};// PieChart的說明的方法：PieChart.prototype.drawDesc = function(index, tex) {// 繪制帶獨立路徑的矩形：this.ctx.fillRect(this.space, this.space + index * (this.space + this.rectH), this.rectW, this.rectH);this.ctx.beginPath();this.ctx.textAlign = 'start';this.ctx.font = '10px Microsoft YaHei';this.ctx.fillText(tex, this.space + this.rectW + 5, this.space + index * (this.space + this.rectH) + 12);};// 把數(shù)據(jù)中的num轉(zhuǎn)化為弧度并追加到data中返回新的data數(shù)據(jù)PieChart.prototype.trans = function(data) {var sum = 0;data.forEach(function(item, i) {sum += item.num;});data.forEach(function(item, i) {var angle = Math.PI * 2 * item.num / sum;item.angle = angle; //追加弧度到data數(shù)據(jù)中});return data;};// PieChart初始化：PieChart.prototype.init = function(data) {this.drawPie(data);};// 定義一個數(shù)據(jù)data:var data = [{title: '15-20歲',num: 16}, {title: '20-25歲',num: 12}, {title: '25-30歲',num: 56}, {title: '30-35歲',num: 12}, {title: '35-40歲',num: 42}, {title: '45-50歲',num: 12}, {title: '50歲以上',num: 22}];// 實例化一個對象:var piechart = new PieChart();piechart.init(data);</script>

Canvas面向?qū)ο罄L制坐標系：

<script>//1. 構(gòu)造坐標系函數(shù)：var LineChart = function(ctx){this.ctx = ctx || document.querySelector('#canvaBox').getContext('2d');// 獲取畫布的大小尺寸：this.canvasWidth = this.ctx.canvas.width;this.canvasHeight = this.ctx.canvas.height;// 設(shè)置網(wǎng)格的大小尺寸為10：this.gridSize = 10;// 設(shè)置坐標系的間距為20：this.space = 20;// 定義坐標軸的原點坐標為(this.space,this.canvasHeight - this.space)this.x0 = this.space;this.y0 = this.canvasHeight - this.space;// 設(shè)置箭頭的大小為10：this.arrowSize = 10;// 設(shè)置繪制的點的大小為6：this.dottedSize = 6;// 點的坐標和數(shù)據(jù)有關(guān)，數(shù)據(jù)可視化：};// 2.繪制canvas(LineChar)中需要的數(shù)據(jù)：// 繪制網(wǎng)格線：LineChart.prototype.drawGrid = function(){// x方向的線：this.ctx.strokeStyle = '#999';var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);//x方向的線的總條數(shù)for(var i = 0;i < xLineTotal;i ++){this.ctx.beginPath();this.ctx.moveTo(0,this.gridSize * i - .5);this.ctx.lineTo(this.canvasWidth,this.gridSize * i - .5);this.ctx.stroke();};// y方向的線：var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);//y方向的線的總條數(shù)for(var j = 0;j < yLineTotal; j++){this.ctx.beginPath();this.ctx.moveTo(this.gridSize * j - .5,0);this.ctx.lineTo(this.gridSize * j - .5,this.canvasHeight);this.ctx.stroke();};};// 繪制坐標系：LineChart.prototype.drawNav = function(){this.ctx.strokeStyle='#000'this.ctx.beginPath();// 設(shè)置x和y的原點坐標為(x0,y0):this.ctx.moveTo(this.x0 - .5,this.y0 - .5);// 繪制x軸：this.ctx.lineTo(this.canvasWidth,this.y0 -.5);this.ctx.lineTo(this.canvasWidth - this.gridSize,this.y0 + this.gridSize / 2);this.ctx.lineTo(this.canvasWidth - this.gridSize,this.y0 - this.gridSize / 2);this.ctx.lineTo(this.canvasWidth,this.y0 -.5);this.ctx.stroke();this.ctx.fill();// 繪制y軸：this.ctx.beginPath();this.ctx.moveTo(this.x0 - .5,this.y0 - .5);this.ctx.lineTo(this.x0 - .5,-0.5);this.ctx.lineTo(this.x0 + this.gridSize / 2,this.gridSize - 0.5);this.ctx.lineTo(this.x0 - this.gridSize / 2,this.gridSize - 0.5);this.ctx.lineTo(this.x0 - .5,-0.5);this.ctx.stroke();this.ctx.fill();};LineChart.prototype.drawDotted = function(data){var that = this;// 記錄當前坐標：var VarCanvasX = 0;var VarCanvasY = 0;// 遍歷傳入的date數(shù)據(jù)：data.forEach(function(item,i){// 在canvas中的坐標：var canvasX = that.x0 + item.x;var canvasY = that.y0 - item.y;// 在canvas中繪制點：that.ctx.beginPath();that.ctx.moveTo(canvasX - that.dottedSize / 2 ,canvasY - that.dottedSize /2);that.ctx.lineTo(canvasX - that.dottedSize / 2 ,canvasY + that.dottedSize /2);that.ctx.lineTo(canvasX + that.dottedSize / 2 ,canvasY + that.dottedSize /2);that.ctx.lineTo(canvasX + that.dottedSize / 2 ,canvasY - that.dottedSize /2);that.ctx.closePath();that.ctx.fill();// 用直線連接每一個點：if(i == 0){//判斷當為0時，為第一個點的時候，起點為(x0,y0),否則起點為上一個點that.ctx.beginPath();that.ctx.moveTo(that.x0,that.y0);that.ctx.lineTo(canvasX,canvasY);that.ctx.stroke();}else{that.ctx.beginPath();that.ctx.moveTo(VarCanvasX,VarCanvasY);that.ctx.lineTo(canvasX,canvasY);that.ctx.stroke();};VarCanvasX = canvasX;VarCanvasY = canvasY;});}; //繪制所有點：var data =[{x:50,y:120},{x:100,y:140},{x:150,y:150},{x:200,y:170}, {x:250,y:110}, {x:300,y:170},{x:350,y:160},{x:400,y:120},{x:450,y:130}, {x:500,y:140}];//3.為構(gòu)造的坐標函數(shù)添加定義好的方法初始化canvas：LineChart.prototype.show = function(data){this.drawGrid();this.drawNav();this.drawDotted(data);};// 4.創(chuàng)建一個LineChart對象：var lineChart = new LineChart();// 5.調(diào)用對象的方法：lineChart.show(data);</script>

Canvas面向?qū)ο蠓绞娇刂菩∪诵凶?#xff08;游戲開發(fā)方向）：

主要原理：利用雪碧圖定位的方式產(chǎn)生幀動畫，如下雪碧圖：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>運動小人</title><style>canvas {margin: 0 auto;border: 1px solid;}</style></head><body><canvas width='1300' height='800'></canvas><script>// 創(chuàng)建對象的函數(shù)：var Person = function(cTx) {// 定義屬性并賦值：this.ctx = cTx || document.querySelector('canvas').getContext('2d');this.src = 'image/04.png';this.canvasWidth = this.ctx.canvas.width;this.canvasHeight = this.ctx.canvas.height;// 行走的步伐大小：this.stepSize = 10;// 行走的方向：0---前面 1----左邊 2----右邊 3-----后面this.direction = 0;// 記錄當前圖片的位置：/*x軸方向的偏移步數(shù)*/this.stepX = 0;/*y軸方向的偏移步數(shù)*/this.stepY = 0;// 調(diào)用初始化方法this.init();};// 加載圖片的業(yè)務(wù)：Person.prototype.loadimage = function(callback) {var image = new Image(); // 創(chuàng)建對象的方式載入圖片到內(nèi)存中image.onload = function() {callback && callback(image); //圖片加載完成后可以通過回調(diào)函數(shù)的方式獲取圖片的相關(guān)信息，也可直接在這個函數(shù)里面直接獲取圖片的信息};image.src = this.src;};// 初始化方法：Person.prototype.init = function() {var that = this;// 1.調(diào)用 加載圖片的業(yè)務(wù) 的方法并通過回調(diào)函數(shù)獲取圖片的信息this.loadimage(function(image) {// 圖片的大小：that.imageWidth = image.width;that.imageHeight = image.height;// 人物的大小：that.personWidth = that.imageWidth / 4;that.personHeight = that.imageHeight / 4;// 繪制圖片的起點：that.x0 = (that.canvasWidth - that.personWidth) / 2;that.y0 = (that.canvasHeight - that.personHeight) / 2;// 2.默認繪制小人在canvas中間：that.ctx.drawImage(image, 0, 0, that.personWidth, that.personHeight, that.x0, that.y0, that.personWidth, that.personHeight);// 3.通過方向鍵控制小人行走// 注冊鍵盤按下事件控制小人行走的方向和定位：上---38 下---40 左----37 右---39that.index = 0;document.onkeydown = function(e) {if (e.keyCode == 38) {// 上that.direction = 3;that.stepY--;that.DrawImage(image);} else if (e.keyCode == 40) {// 下that.direction = 0;that.stepY++;that.DrawImage(image);} else if (e.keyCode == 37) {// 左that.direction = 1;that.stepX--;that.DrawImage(image);} else if (e.keyCode == 39) {// 右that.direction = 2;that.stepX++;that.DrawImage(image);};};});};// 繪制通過方向控制行走的小人的方法：Person.prototype.DrawImage = function(image) {this.index++;// 清除畫布：this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);// 繪制小人行走：this.ctx.drawImage(image,this.index * this.personWidth, this.direction * this.personHeight,this.personWidth, this.personHeight,this.x0 + this.stepX * this.stepSize, this.y0 + this.stepY * this.stepSize,this.personWidth, this.personHeight);if (this.index >= 3) {this.index = 0;}};new Person();</script></body></html>

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者 刪除。
筆者：苦海

總結(jié)

以上是生活随笔為你收集整理的html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。