當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

【JavaScript】Canvas绘图整理

發布時間：2025/3/15 javascript 20 豆豆

生活随笔收集整理的這篇文章主要介紹了【JavaScript】Canvas绘图整理小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

繪制矩形
點線模式
繪制藝術字
繪制圓形路徑
繪制圓角矩形
繪制凹多邊形
繪制曲線
繪制位圖
繪制坐標變換
繪制坐標變換與路徑結合
繪制矩陣變換
繪制疊加效果
繪制線性漸變和徑向漸變
位圖填充
位圖剪裁
改變位圖透明度
輸出位圖
基于定時器的動畫
基于requestAnimationFrame的動畫

繪制矩形

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 繪制矩形 </title> </head> <body><canvas id="mc" width="300" height="200" style="border:1px solid black"></canvas><script type="text/javascript">// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');// 設置填充顏色ctx.fillStyle = '#f84d4f';// 繪制矩形ctx.fillRect(50 , 50 , 200 , 100);</script> </body> </html>

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 繪制矩形 </title> </head> <body><canvas id="mc" width="400" height="350" style="border:1px solid black"></canvas><script type="text/javascript">// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');// 設置填充顏色ctx.fillStyle = '#f74d00';// 填充一個矩形ctx.fillRect(30 , 20 , 120 , 60);// 設置填充顏色ctx.fillStyle = '#ff9700';// 填充一個矩形ctx.fillRect(80 , 60 , 120 , 60);// 設置填充顏色ctx.fillStyle = '#daee00';// 填充一個矩形ctx.fillRect(130 , 90 , 120 , 60);// 設置線條顏色ctx.strokeStyle = "#b203ff";// 設置線條寬度ctx.lineWidth = 10;// 繪制一個矩形邊框ctx.strokeRect(30 , 200 , 120 , 60);// 設置線條顏色ctx.strokeStyle = "#19b8ff";// 設置線條連接風格ctx.lineJoin = "round";// 繪制一個矩形邊框ctx.strokeRect(80 , 230 , 120 , 60);// 設置線條顏色ctx.strokeStyle = "#51f100";// 設置線條連接風格ctx.lineJoin = "bevel";// 繪制一個矩形邊框ctx.strokeRect(130 , 260 , 120 , 60);</script> </body> </html>

點線模式

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 點線模式 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.center {text-align:center}</style> </head> <body><canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas><div class="center"><p><b>選擇點線模式：</b></p><select id="lineDash" class="center" onchange="changeLineDash(this.value);"></select><p><b>選擇點線相位：</b></p><input type="range" id="lineDashOffset" style="width:300px" onchange="changeLineDashOffset(this.value);"/></div><script type="text/javascript">// 定義一個數組來代表所有點線模式var lineDashArr = [[2, 2], [2.0, 4.0, 2.0], [2.0, 4.0, 6.0], [2.0, 4.0, 2.0, 6.0],[2.0, 2.0, 4.0, 4.0], [2.0, 2.0, 4.0, 6.0, 10.0]];var phaseMax = 20;var phaseMin = -20;// 初始化界面上lineDash元素var lineDashEle = document.getElementById("lineDash");for (var i = 0; i < lineDashArr.length; i++) {lineDashEle.options[i] = new Option(lineDashArr[i], i);}lineDashEle.options[0].selected = true;// 初始化界面上lineDashOffset元素var lineDashOffsetEle = document.getElementById("lineDashOffset");lineDashOffsetEle.max = phaseMax;lineDashOffsetEle.min = phaseMin;lineDashOffsetEle.step = 0.1;lineDashOffsetEle.value = 0;// lineDash變量保存繪圖的點線模式var lineDash = lineDashArr[0];// lineDashOffset變量保存繪圖的點線相位var lineDashOffset = 0;function draw() {// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');ctx.fillStyle = "#ffffff";ctx.fillRect(0, 0, 400, 280);// 設置線條顏色ctx.strokeStyle = "#0060bf";// 設置線條寬度ctx.lineWidth = 3;// 設置點線模式ctx.setLineDash(lineDash);// 設置點線模式的相位ctx.lineDashOffset = lineDashOffset;// 繪制一個矩形邊框ctx.strokeRect(40 , 60 , 120 , 120);ctx.beginPath();// 添加一個圓ctx.arc(300, 120, 60, 60, 0, Math.PI * 2, true);// 添加一條直線ctx.moveTo(30 , 30);ctx.lineTo(360 , 30);// 再添加一條直線ctx.moveTo(200 , 50);ctx.lineTo(200 , 240);ctx.closePath();ctx.stroke();}function changeLineDash(i) {lineDash = lineDashArr[i];draw();}function changeLineDashOffset(val) {lineDashOffset = val;draw();}draw();</script> </body> </html>

繪制藝術字

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 繪制藝術字 </title> </head> <body><canvas id="mc" width="1050" height="130" style="border:1px solid black"></canvas><script type="text/javascript">// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');ctx.fillStyle = '#b26aff';ctx.font = 'italic bold 25px 楷體';ctx.textBaseline = 'top';// 填充字符串ctx.fillText('德瑪西亞是一個實力雄厚、奉公守法的國家，有著功勛卓著的光榮軍史。', 0, 0);ctx.strokeStyle = '#ffaf03';ctx.font='bold 30px 仿宋';// 繪制字符串的邊框ctx.strokeText('這里非常重視正義、榮耀、職責的意識形態，這里的人民為此感到強烈自豪。', 0, 50);ctx.fillStyle = '#00a802';ctx.font='20px 隸書';ctx.textBaseline = 'bottom';ctx.fillText('德瑪西亞是一個自給自足的農耕社會，肥沃的耕地、大片未砍伐的森林、以及礦產儲量豐富的山脈遍及全境。', 10, 130);</script> </body> </html>

繪制圓形路徑

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 繪制圓形路徑 </title> </head> <body><canvas id="mc" width="350" height="350" style="border:1px solid black"></canvas><script type="text/javascript">// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');for (var i = 0; i < 10; i++) {// 開始定義路徑ctx.beginPath();// 添加一段圓弧ctx.arc(30+i*25, 30 + i*25 , (i+1)*8, 0, Math.PI*2, true);// 關閉路徑ctx.closePath();// 設置填充顏色ctx.fillStyle = 'rgba(255 , 0 , 0 , ' + (10-i)*0.1 + ')';// 填充當前路徑。ctx.fill();}</script> </body> </html>

繪制圓角矩形

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 繪制圓角矩形 </title> </head> <body><canvas id="mc" width="500" height="300" style="border:1px solid black"></canvas><script type="text/javascript">/* * 該方法負責繪制圓角矩形* x1、y2：是圓角矩形左上角的坐標* width、height：控制圓角舉行的寬、高* radius：控制圓角矩形的四個圓角的半徑*/function createRoundRect(ctx, x1, y1, width, height, radius) {ctx.beginPath();// 移動到左上角ctx.moveTo(x1+radius, y1);// 添加一條連接到右上角的線段ctx.lineTo(x1+width-radius, y1);// 添加一段圓弧ctx.arcTo(x1+width, y1, x1+width, y1+radius, radius);// 添加一條連接到右下角的線段ctx.lineTo(x1+width, y1+height-radius);// 添加一段圓弧ctx.arcTo(x1+width, y1+height, x1+ width-radius, y1+height, radius);// 添加一條連接到左下角的線段ctx.lineTo(x1+radius, y1+height);// 添加一段圓弧ctx.arcTo(x1, y1+height, x1, y1+height-radius, radius);// 添加一條連接到左上角的線段ctx.lineTo(x1, y1+radius);// 添加一段圓弧ctx.arcTo(x1, y1, x1+radius, y1, radius);ctx.closePath();}// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');ctx.lineWidth = 5;ctx.strokeStyle = '#0074f1';createRoundRect(ctx, 50, 50, 400, 200, 20);ctx.stroke();</script> </body> </html>

繪制凹多邊形

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 繪制凹多邊形 </title> </head> <body><canvas id="mc" width="460" height="280" style="border:1px solid black"></canvas><script type="text/javascript">/** 該方法負責繪制凹多邊形* n：該參數應設為奇數，控制繪制N角星* dx、dy：控制N角星的位置* size：控制N角星的大小*/function createStar(context, n, dx, dy, size) {// 開始創建路徑context.beginPath();var dig = Math.PI/n*4;context.moveTo(dx, size+dy);for (var i = 0; i <= n; i++) {var x = Math.sin(i*dig);var y = Math.cos(i*dig);context.lineTo(x*size+dx, y*size+dy);}context.closePath();}// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');// 繪制凹三邊形createStar(ctx, 3, 80, 60, 50);ctx.fillStyle = "#ff310e";ctx.fill();// 繪制凹五邊形createStar(ctx, 5, 180, 60, 50);ctx.fillStyle = "#ffb216";ctx.fill();// 繪制凹七邊形createStar(ctx, 7, 280, 60, 50);ctx.fillStyle = "#fff92d";ctx.fill();// 繪制凹九邊形createStar(ctx, 9, 380, 60, 50);ctx.fillStyle = "#e4ff19";ctx.fill();// 繪制凹十一邊形createStar(ctx, 11, 80, 200, 50);ctx.fillStyle = "#55cd00";ctx.fill();// 繪制凹十三邊形createStar(ctx, 13, 180, 200, 50);ctx.fillStyle = "#00eb91";ctx.fill();// 繪制凹十五邊形createStar(ctx, 15, 280, 200, 50);ctx.fillStyle = "#14d9ff";ctx.fill();// 繪制凹十七邊形createStar(ctx, 17, 380, 200, 50);ctx.fillStyle = "#ab49ff";ctx.fill();</script> </body> </html>

繪制曲線

《繪制二次貝塞爾曲線》
《繪制貝塞爾曲線》

繪制位圖

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 繪制位圖 </title> </head> <body><canvas id="mc" width="1250" height="700" style="border:1px solid black"></canvas><script type="text/javascript">// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');// 創建Image對象var image = new Image();// 指定Image對象裝載圖片image.src = "cat.jpg";// 當圖片裝載完成時激發該函數image.onload = function() {// 保持原大小繪制圖片ctx.drawImage(image, 20, 10);// 繪制圖片時進行縮放ctx.drawImage(image, 700, 10, 100, 100);var sw = 210;var sh = 150;// 從源位圖中挖取一塊并放大2倍后繪制在Canvas上ctx.drawImage(image, 210, 100, sw, sh, 800, 300, sw*2, sh*2);sw = 210;sh = 200;// 從源位圖中挖取一塊直接繪制在Canvas上ctx.drawImage(image, 210, 100, sw, sh, 900, 10, sw, sh);}</script> </body> </html>

繪制坐標變換

繪制網螺旋旋轉圖形

繪制坐標變換與路徑結合

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 繪制雪花飄飄 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style> </head> <body><canvas id="mc" width="520" height="280" style="border:1px solid black"></canvas><script type="text/javascript">function createFlower(context, n, dx, dy, size, length) {// 開始創建路徑context.beginPath();context.moveTo(dx, dy+size);var dig = 2*Math.PI/n;for(var i = 1; i < n+1; i++) {// 結算控制點坐標var ctrlX = Math.sin((i-0.5)*dig)*length+dx;var ctrlY= Math.cos((i-0.5)*dig)*length+dy;// 結算結束點的坐標var x = Math.sin(i*dig)*size+dx;var y = Math.cos(i*dig)*size+dy;// 繪制二次曲線context.quadraticCurveTo(ctrlX, ctrlY, x, y);}context.closePath();}// 定義每個雪花的初始位置snowPos = [{x : 20, y : 4},{x : 60, y : 4},{x : 100, y : 4},{x : 140, y : 4},{x : 180, y : 4},{x : 220, y : 4},{x : 260, y : 4},{x : 300, y : 4},{x : 340, y : 4},{x : 380, y : 4},{x : 420, y : 4},{x : 460, y : 4},{x : 500, y : 4}];function fall(context) {// 設置采用淺藍色作為背景填充色context.fillStyle = "#2a82ff";// 填充矩形context.fillRect(0, 0, 520, 280);// 設置采用白色作為填充色context.fillStyle = "#ffffff";for (var i = 0, len = snowPos.length; i < len; i++) {// 保存當前繪圖狀態context.save();// 平移坐標系統評context.translate(snowPos[i].x, snowPos[i].y);// 旋轉坐標系統context.rotate((Math.random()*6-3)*Math.PI/10);// 控制雪花下落snowPos[i].y += Math.random()*8;if (snowPos[i].y > 280) {snowPos[i].y = 4;}// 創建并繪制雪花createFlower(context, 6, 0, 0, 5, 8);context.fill();// 恢復繪圖狀態context.restore();}}// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');setInterval("fall(ctx);" , 200);</script> </body> </html>

繪制矩陣變換

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 傾斜變換 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style> </head> <body><canvas id="mc" width="600" height="360" style="border:1px solid black"></canvas><script type="text/javascript">function tran(context, angle) {// 借助于transform方法實現傾斜變換context.transform(1, 0, -Math.tan(angle), 1, 0, 0);}// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');ctx.fillStyle = "rgba(100, 50, 180, 0.3)";// 坐標系統平移到360、5位置ctx.translate(360, 5);for(var i = 0; i < 30; i++) {// 平移坐標系統ctx.translate(50, 30);// 縮放坐標系統ctx.scale(0.93, 0.93);// 傾斜變換tran(ctx, Math.PI/10);ctx.fillRect(0, 0, 150, 75);}</script> </body> </html>

繪制疊加效果

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 疊加風格 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style> </head> <body>選擇疊加風格：<select style="width:160px" onchange="draw(this.value);"><option value="source-over">source-over</option><option value="source-in">source-in</option><option value="source-out">source-out</option><option value="source-atop">source-atop</option><option value="destination-over">destination-over</option><option value="destination-in">destination-in</option><option value="destination-out">destination-out</option><option value="destination-atop">destination-atop</option><option value="lighter">lighter</option><option value="xor">xor</option><option value="copy">copy</option></select><br/><br/><canvas id="mc" width="400" height="200" style="border:1px solid black"></canvas><script type="text/javascript">var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');var draw = function(compositeOper) {// 保存當前的繪圖狀態ctx.save();// 獲取canvas元素對應的DOM對象ctx.clearRect(0, 0, 400, 200);// 設置填充顏色為紅色ctx.fillStyle = '#ff0000';// 填充一個矩形ctx.fillRect(30, 20, 160, 100);// 設置圖形疊加風格ctx.globalCompositeOperation = compositeOper// 設置填充顏色為綠色ctx.fillStyle = '#00ff00';// 填充一個矩形ctx.fillRect(120, 60, 160, 100);// 恢復之前保存的繪圖狀態ctx.restore();}draw("source-over");</script> </body> </html>

繪制線性漸變和徑向漸變

繪制線性漸變和徑向漸變

位圖填充

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 位圖填充 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style> </head> <body><canvas id="mc" width="450" height="330" style="border:1px solid black"></canvas><script type="text/javascript">// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');ctx.save();ctx.translate(30, 20);var image = new Image();image.src = "rocket_flat.png";image.onload = function() {// 創建位圖填充imgPattern = ctx.createPattern(image, "repeat");// 設置使用位圖填充作為填充顏色ctx.fillStyle = imgPattern;// 填充一個矩形ctx.fillRect(0, 0, 180, 90);// 恢復坐標系統ctx.restore();// 平移坐標系統ctx.translate(300, 200)ctx.beginPath();// 添加圓弧ctx.arc(0, 0, 100, 0, Math.PI*2 , true);ctx.closePath();ctx.lineWidth = 30;// 設置使用位圖填充作為邊框顏色ctx.strokeStyle = imgPattern;ctx.stroke();}</script> </body> </html>

位圖剪裁

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 位圖裁剪 </title> </head> <body><canvas id="mc" width="1240" height="632" style="border:1px solid black"></canvas><script type="text/javascript">// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');var dig = Math.PI / 20 ;var count = 0;var image = new Image();image.src = "cat.jpg";image.onload = function() {// 指定每隔0.1秒調用一次addRadial函數setInterval("addRadial();" , 100);}var addRadial = function() {// 保存當前的繪圖狀態ctx.save();// 開始創建路徑ctx.beginPath();// 添加一段圓弧ctx.arc(600, 250, 200, 0, dig*++count, false);// 讓圓弧連接到圓心ctx.lineTo(300, 300);// 關閉路徑ctx.closePath();// 剪切路徑ctx.clip();// 此時繪制的圖片只有路徑覆蓋的部分才會顯示出來ctx.drawImage(image, 124, 20);ctx.restore();}</script> </body> </html>

改變位圖透明度

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 位圖改變透明度 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style> </head> <body><canvas id="mc" width="250" height="250" style="border:1px solid black"></canvas><script type="text/javascript">// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');var image = new Image();image.src = "rocket_flat.png";image.onload = function() {// 用帶透明度參數的方法繪制圖片drawImage(image, 25, 25, 0.4);var drawImage = function(image, x, y, alpha) {// 繪制圖片ctx.drawImage(image, x, y);// 獲取從x、y開始，寬為image.width、高為image.height的圖片數據// 也就是獲取繪制的圖片數據var imgData = ctx.getImageData(x, y, image.width, image.height);for (var i = 0, len = imgData.data.length; i < len; i += 4) {// 改變每個像素的透明度imgData.data[i+3] = imgData.data[i+3] * alpha;}// 將獲取的圖片數據放回去。ctx.putImageData(imgData, x, y);}</script> </body> </html>

輸出位圖

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 位圖輸出 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style> </head> <body><canvas id="mc" width="380" height="350" style="border:1px solid black"></canvas><img id="result" src="" alt="output" crossOrigin="Anonymous"/><script type="text/javascript">var canvas = document.getElementById('mc');var context = canvas.getContext('2d');context.fillStyle = "#ffffff";context.fillRect(0, 0, 380, 350);context.translate(200, 50);context.fillStyle = 'rgba(255, 0, 0, 0.25)';for (var i = 0; i < 50; i++) {context.translate(25, 25);context.scale(0.95, 0.95);context.rotate(Math.PI/10);context.fillRect(0, 0, 100, 50);}// 使用img元素來顯示Canvas的輸出結果document.getElementById("result").src = canvas.toDataURL("image/png");</script> </body> </html>

基于定時器的動畫

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 基于定時器的簡單動畫 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style> </head> <body><canvas id="mc" width="380" height="320" style="border:1px solid black"></canvas><script type="text/javascript">// 通過prototype為CanvasRenderingContext2D類增加一個方法CanvasRenderingContext2D.prototype.fillCircle = function(x, y, radius, pattern) {ctx.save();ctx.translate(x, y);ctx.fillStyle = pattern;ctx.beginPath();// 添加圓弧ctx.arc(0, 0, radius, 0, Math.PI * 2, true);ctx.closePath();ctx.fill()ctx.restore();}// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');var radius = 15;var rg = ctx.createRadialGradient(-radius/2, -radius/2, 0, -radius/2, -radius/2, radius*1.67);// 向徑向漸變上添加顏色rg.addColorStop(0.1 , "#f0f0f0");rg.addColorStop(0.9 , "#000111");var x = canvas.width/2;var y = 20;var xSpeed = Math.random()*11-5;var ySpeed = Math.random()*5+2;function draw() {ctx.fillStyle = "#ffffff";// 清除上一次繪制的內容ctx.clearRect(x-radius-2, y-radius-2, x+xSpeed+radius+2, y+ySpeed+radius+2);x += xSpeed;y += ySpeed;// 繪制圓形ctx.fillCircle(x, y, 15, rg);// 如果小球到了左邊界或右邊界，發生碰撞返回if(x <= radius || x >= canvas.width-radius) {xSpeed = -xSpeed;}// 如果小球到了上邊界或下邊界，發生碰撞返回if(y <= radius || y > canvas.height-radius) {ySpeed = -ySpeed;}}// 使用定時器控制每隔30ms執行一次draw函數setInterval(draw , 30);</script> </body> </html>

基于requestAnimationFrame的動畫

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 簡單彈球動畫 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style> </head> <body><canvas id="mc" width="380" height="320" style="border:1px solid black"></canvas><script type="text/javascript">// 通過prototype為CanvasRenderingContext2D類增加一個方法CanvasRenderingContext2D.prototype.fillCircle = function(x, y, radius, pattern) {ctx.save();ctx.translate(x, y);ctx.fillStyle = pattern;ctx.beginPath();// 添加圓弧ctx.arc(0, 0, radius, 0, Math.PI*2, true);ctx.closePath();ctx.fill()ctx.restore();}// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');var radius = 15;var rg = ctx.createRadialGradient(-radius/2, -radius/2, 0, -radius/2, -radius/2, radius * 1.67);// 向徑向漸變上添加顏色rg.addColorStop(0.1 , "#f0f0f0");rg.addColorStop(0.9 , "#000111");var x = canvas.width/2;var y = 20;var xSpeed = Math.random()*11-5;var ySpeed = Math.random()*5+2;function draw() {ctx.fillStyle = "#ffffff";// 清除上一次繪制的內容ctx.clearRect(x-radius-2, y-radius-2, x+xSpeed+radius+2, y+ySpeed+radius+2);x += xSpeed;y += ySpeed;// 繪制圓形ctx.fillCircle(x, y, 15, rg);// 如果小球到了左邊界或右邊界，發生碰撞返回if(x <= radius || x >= canvas.width-radius) {xSpeed = -xSpeed;}// 如果小球到了上邊界或下邊界，發生碰撞返回if(y <= radius || y > canvas.height-radius) {ySpeed = -ySpeed;}}function anim() {requestAnimationFrame(function() {draw();anim();});};anim();</script> </body> </html>

總結

以上是生活随笔為你收集整理的【JavaScript】Canvas绘图整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【Java】Socket多客户端Clie
下一篇：【机器学习】机器学习中的异常值的识别和处