canvas ：可以理解為一個div，作用是一塊畫板
如果想要使用canvas，需要創建一個“畫家”，生成畫家的方法：
var huaban = document.querySelector('.canvas');//畫板 var bicaso = huaban.getContext('2d');//畫家 canvas背景關系物件 //繪畫操作 //表示在距離畫板左上10px 10px的位置畫了一個長寬分別為50px的矩形，默認填充顏色黑色 繪制矩形 bicaso.fillRect(10,10,50,50); //表示繪制輪廓線 bicaso.strokeRect(10,10,50,50); //繪制畫筆顏色 bicaso.fillStyle='顏色'; //擦除矩形方法 bicaso.clearRect(x,y,要擦除的矩形寬度，要擦除的矩形高度);
Transparency(透明度)
globalAlpha = transparencyValue: 這個屬性影響到 canvas 里所有圖形的透明度，有效的值范圍是 0.0 （完全透明）到 1.0（完全不透明），默認是 1.0，
globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時候相當高效，不過，我認為使用rgba()設定透明度更加好一些，
canvas基礎demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 在頁面中添加canvas元素 --> <!--1. 創建一塊畫布，必須定義canvas的id屬性以方便js呼叫， 可以使用css控制canvas的外觀 --> <canvas id="myCanvas" width="300" height="300" style="border: 2px solid red;"> <!-- 通過javascript可以在畫布中添加線條文字圖片影片，也可以繪畫 --> <!-- 有些瀏覽器不支持canvas元素，會直接忽略canvas元素顯示替代內容，所以需要為這些瀏覽器提供替代canvas的顯示內容 --> 您的瀏覽器不支持canvas，請更新或更換瀏覽器， </canvas> <canvas id="canvas2" width="300" height="300" style="border: 2px solid red;">您的瀏覽器不支持canvas</canvas> <canvas id="tutorial" width="300" height="300" style="border: 2px solid red;">您的瀏覽器不支持canvas</canvas> <script> // 2.在js腳本中獲取到canvas元素 var canvas = document.getElementById('myCanvas'); // 判斷getContext()方法是否存在，來檢測瀏覽器是否支持canvas========================== if(canvas.getContext) { alert("您的瀏覽器支持canvas"); }else { alert("您的瀏覽器不支持canvas"); } // =============================================================================== // 3.通過canvas的getContext()方法獲取畫布背景關系，即創建context物件，以獲取允許進行繪畫的2D環境， 或者3D環境("3D") var context = canvas.getContext("2d");//getContext("2d")該方法用于回傳一個內建的h5物件，該物件提供了用于繪圖的方法和屬性，使用該物件可以在canvas畫布中繪制圖形， 相當于畫筆， // 4.繪制圖形的操作 ============================================================================================================= //繪制一個矩形，填充色為藍色，矩形坐標為(10,10) 長50寬80，------------------------------- context.fillStyle="blue"; context.fillRect(10,10,50,80);//strokeRect(x,y,width,height) clearRect(x, y, widh, height)：清除指定的矩形區域，然后這塊區域會變的完全透明， // 回圈生成若干個40px的小矩形，邊框顏色隨機------------------------------------------------- function draw0(){ var canvas = document.getElementById('canvas2'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); for (var i = 0; i < 6; i++){//6行6列 for (var j = 0; j < 6; j++){ ctx.fillStyle = "rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})"; // ctx.fillStyle = "rgb(randomInt(0, 255),randomInt(0, 255),randomInt(0, 255))"; ctx.strokeRect(j * 50, i * 50, 40, 40); // ctx.fillRect(j * 50, i * 50, 40, 40); } } } draw0(); /** 回傳隨機的 [from, to] 之間的整數(包括from，也包括to) 顏色隨機生成失敗？？？？？？？？？？？？？？？？ */ function randomInt(from, to){ return parseInt(Math.random() * (to - from + 1) + from); } //繪制一條直線------------------------------------------------- context.moveTo(0,0); context.lineTo(200,30); context.stroke(); // 繪制復雜圖形--------使用繪制路徑方法--------Math.sin()----Math.cos()------Math.PI------beginPath()---lineTo()----closePath()----------- var n = 0; var dx = 150; var dy = 150; var s = 100; context.beginPath();//開始一條路徑 或重置當前路徑 context.fillStyle = 'orange';//填充屬性設定 context.strokeStyle = 'yellow';//邊框樣式 context.lineWidth = '1';//邊框寬度 var x = Math.sin(0);//使用sin cos三角函式計算頂點坐標x,y var y = Math.cos(0); var dig = Math.PI / 15 * 11;//Math.PI回傳的是圓周率 π for(var i = 0;i<30;i++) {//表示30個點的連線 var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx+x*s,dy+y*s); } context.closePath();//關閉路徑 context.fill();//填充 默認填充黑色 context.stroke();//邊框 默認黑色 // 繪制圓形----------------beginPath()----arc()-----closePath()------------------------------- // arc(x,y,r,sAngle,eAngle,counterclockwise);---x,y表示圓心坐標---r表示圓版半徑---sAngle起始角【0】---eAngle結束角【2*Math.PI】---counterclockwise規定逆時針還是順時針繪圖（false順時針，true逆時針） context.fillStyle = "blue";//設定畫筆填充顏色樣式 context.strokeStyle = 'red';//設定邊框顏色樣式 context.strokeWidth = '2'; context.beginPath();//開始創建路徑 context.arc(50,50,50,0,2*Math.PI,true);//圓心坐標(50,50) 半徑50 逆時針旋轉 從0°~360° context.closePath(); context.fill(); context.stroke(); // 繪制14潭訓形-------------------------0°表示水平線 +90°表示負y軸方向----------------------------------------------------------- for(var i=0;i<15;i++) { context.strokeStyle='red'; context.beginPath(); context.arc(10,300,i*10,0,Math.PI*3/2,true);//弧心坐標(0,300) 半徑10*i 逆時針旋轉0°~((1/2)π)° 逆時針旋轉0°~90° context.closePath();//從當前點到開始點的閉合路徑操作 context.stroke(); } // 繪制圓弧-------------通過使用控制點----arcTo(x1,y1,x2,y2,r);--控制點1坐標 控制點2坐標 圓弧半徑---------------------------------------- context.beginPath(); context.moveTo(150,150)//起點坐標 context.arcTo(200,150,200,250,60);//arcTo表示繪制的圖形由兩條切換所決定，l1為起始點和控制點1的直線，l2為控制點1和控制點2的直線 context.lineTo(250,250);//到達的下一點的坐標 context.stroke();//繪圖 context.fill();//填充 // 繪制路徑------------------------路徑都是閉合的---------------------------------- function draw1() { context.fillStyle="orange"; context.beginPath();//新建一條路徑 context.moveTo(10,10);//將畫筆移動到指定坐標 context.lineTo(200,50); context.lineTo(10,50); context.closePath();//閉合 context.stroke();//繪制路徑 context.fill();//填充閉合區域 } draw1(); // 透明度 Transparency(0.0,1.0) globalAlpha = transparencyValue; 如果不是大量需要設定透明度，用rgba就夠了 // lineWidth 線條寬度 // lineCap = type 線條末端樣式 butt--末端以方形結束 round--末端以圓形結束 square--末端以方形結束，但兩端都增加了一個長度為線寬一半的矩形區域 // lineJoin=type 線條接合處樣式 round--弧形 bevel--接合處以橫線為底 miter(默認)--接合處延申相連部分的外邊緣，形成靈性 function draw3(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); var lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 20; for (var i = 0; i < lineJoin.length; i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(50, 50 + i * 50); ctx.lineTo(100, 100 + i * 50); ctx.lineTo(150, 50 + i * 50); ctx.lineTo(200, 100 + i * 50); ctx.lineTo(250, 50 + i * 50); ctx.stroke(); } } draw3(); </script> </body> </html>
小白進階，期待學友共同討論和補充
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/116177.html
標籤：Html/Css
上一篇：初識HTML_表單