# 3.標簽篇:canvas - 1. 語義化標簽 都是塊盒 <header></header>:頁頭 <footer></footer>:頁腳 <nav></nav>:導航 <article></article>:用於文章,可以直接被引用拿走的 <section></section>:用於段落 < ...
# 3.標簽篇:canvas
- 1. 語義化標簽 都是塊盒 <header></header>:頁頭 <footer></footer>:頁腳 <nav></nav>:導航 <article></article>:用於文章,可以直接被引用拿走的 <section></section>:用於段落 <aside></aside>:側邊欄 - 2. canvas <canvas></canvas> ```html <style> #can{ width:500px; height:300px; border:1px solid black; } </style> <!--canvas的大小要在行間樣式上寫width和height--> <canvas id="can" width="500px" height="300px"><canvas> <script> var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 //畫一條線 ctx.lineWidth = 10;//設置線的粗細 ctx.moveTo(100, 100);//起點 ctx.lineTo(200, 100);//終點 ctx.lineTo(200, 200);//終點 //ctx.closePath();//之前的線是連續的,就可以閉合起點和最後一個終點 //ctx.fill();//未閉合區域填充色彩 ctx.stroke();//展示畫出的效果 ctx.beginPath();//重現開啟一個新路徑 ctx.lineWidth = 5;//設置線的粗細 ctx.moveTo(200, 200);//起點 ctx.lineTo(300, 300);//終點 ctx.stroke(); </script> <script> var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 //畫一個矩形,方式一 ctx.rect(100, 100, 200, 100);//給出矩形起點的坐標和長與寬 ctx.fill(); ctx.stroke(); //畫一個矩形,方式二 ctx.strokeRect(100, 100, 200, 100); //畫一個矩形,方式三 ctx.strokeRect(100, 100, 200, 100); </script> <script> //寫一個下落的矩形 var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 var height = 100; var timer = setInterval(function(){ ctx.clearRect(0, 0, 500, 300);//清除畫布矩形區域上,原來畫的圖案 ctx.strokeRect(100, height, 50, 50); height += 2; }, 1000 / 30); </script> <script> //畫圓,圓心(x, y), 半徑r, 弧度(起始弧度, 結束弧度), 方向(順時針或逆時針) //弧度從0開始,右手邊水平方向位置 //弧度以圓周長計算,其中Math.PI代表圓周率π //順時針為0,逆時針為1 var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 //畫一個圓 //arc(圓心x, 圓心y, 半徑r, 起始弧度, 結束弧度, 方向) ctx.arc(100, 100, 50, 0, Math.PI/2, 0); ctx.lineTo(100,100); ctx.closePath(); ctx.stroke(); </script> <script> var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 //畫一個圓角矩形 ctx.moveTo(100, 110);//起點A //arcTo(矩形拐角B點x, 矩形拐角B點y, 弧形方向C點x, 弧形方向C點y, 弧形像素) ctx.arcTo(100, 200, 200, 200, 10); ctx.arcTo(200, 200, 100, 200, 10); ctx.arcTo(200, 100, 100, 100, 10); ctx.arcTo(100, 100, 100, 200, 10); ctx.fill(); ctx.stroke(); </script> <script> var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 //畫二次貝塞爾曲線 ctx.beginPath(); ctx.moveTo(100, 100);//起點A //quadraticCurveTo二次貝塞爾曲線的其他兩個點坐標 ctx.quadraticCurveTo(200, 200, 300, 100); ctx.stroke(); //畫三次貝塞爾曲線 ctx.beginPath(); ctx.moveTo(100, 100);//起點A //bezierCurveTo三次貝塞爾曲線的其他三個點坐標 ctx.bezierCurveTo(200, 200, 300, 100, 400, 200); ctx.stroke(); //畫一個寬500,高300的波浪 var width = 500; var height = 300; var num = 0; var offset = 0; setInterval(function(){ ctx.clearRect(0, 0, 500, 300); ctx.beginPath(); ctx.moveTo(0, height / 2);//起點A //quadraticCurveTo二次貝塞爾曲線的其他二個點坐標 ctx.quadraticCurveTo(width/4 + offset - 500, height/2 + Math.sin(num)* 100, width/2 + offset - 500, height/2 + Math.sin(num)* 100); ctx.quadraticCurveTo(width/4*3 + offset - 500, height/2 - Math.sin(num)* 100, width + offset - 500, height/2 - Math.sin(num)* 100); //quadraticCurveTo二次貝塞爾曲線的其他二個點坐標 ctx.quadraticCurveTo(width/4 + offset, height/2 + Math.sin(num)* 100, width/2 + offset, height/2 + Math.sin(num)* 100); ctx.quadraticCurveTo(width/4*3 + offset, height/2 - Math.sin(num)* 100, width + offset, height/2 - Math.sin(num)* 100); ctx.stroke(); offset += 5; offset %= 500; num += 0.02; }, 1000/30); </script> <script> var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 //坐標系原點預設是畫布的左上角 //旋轉 ctx.beginPath(); ctx.translate(100, 100);//坐標系原點平移到100,100 ctx.rotate(Math.PI / 6);//根據坐標系原點進行旋轉 ctx.moveTo(0, 0);//起點A ctx.lineTo(100, 0); ctx.stroke(); </script> <script> var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 ctx.beginPath(); ctx.scale(2, 1);//縮放 ctx.strokeRect(100, 100, 100, 100); </script> <script> var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 //改變坐標系的狀態後,怎樣變回原來的坐標狀態 ctx.save();//首先保存原坐標系的狀態,可以保存坐標系的平移,縮放,旋轉數據 ctx.translate(100, 100);//坐標系原點平移 ctx.rotate(Math.PI/4);//旋轉 ctx.beginPath(); ctx.strokeRect(0, 0, 100, 50); ctx.beginPath(); ctx.restore();//恢複原坐標系的狀態 ctx.strokeRect(200, 0, 100, 50); </script> <script> //記住:紋理的填充都是以坐標系原點進行填充的,所以填充之前,看是否需要改變坐標系原點 //canvas背景填充 var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 var img = new Image(); img.src = "./good.png"; img.onload = function(){ ctx.beginPath(); ctx.translate(100, 100);//改變坐標系原點 var bg = ctx.createPattern(img, "no-repeat");//為畫填充紋理 ctx.fillStyle = bg;//換背景 ctx.fillRect(100, 100, 200, 100); }; </script> <script> //canvas線性漸變,線性漸變的起點是坐標系原點 var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 ctx.beginPath(); var bg = ctx.createLinearGradient(0, 0, 200, 0);//漸變的兩點的坐標 bg.addColorStop(0, "white");//添加關鍵點,第一個參數只能0-1 bg.addColorStop(0.5, "blue"); bg.addColorStop(1, "black"); ctx.fillStyle = bg; ctx.fillRect(0, 0, 200, 100); </script> <script> //canvas輻射漸變,輻射漸變的起點是坐標系原點 var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 ctx.beginPath(); var bg = ctx.createRadialGradient(100, 100, 30, 100, 100, 100);//漸變的圓心坐標x1,y1,半徑r1;圓心坐標x2,y2,半徑r2; bg.addColorStop(0, "white");//添加關鍵點,第一個參數只能0-1 bg.addColorStop(0.5, "black"); bg.addColorStop(1, "white"); ctx.fillStyle = bg; ctx.fillRect(0, 0, 200, 200); </script> <script> //給矩形添加陰影 var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 ctx.beginPath(); ctx.shadowColor = "blue";//添加陰影顏色 ctx.shadowBlur = 20;//添加陰影半徑 ctx.shadowOffsetX = 15;//橫坐標的陰影向右平移15px ctx.shadowOffsetY = 15;//縱坐標的陰影向右平移15px ctx.strokeRect(0, 0, 200, 200); </script> <script> //繪製文字 var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 ctx.beginPath(); ctx.strokeRect(0, 0, 200, 200); ctx.fillStyle = "red"; ctx.font = "30px Georgia";//字體大小,字體 ctx.strokeText("panda", 200, 100);//回執的文字,橫坐標,縱坐標。對文字描邊,產生空心文字 ctx.fillText("panda", 200, 300);//回執的文字,橫坐標,縱坐標。對文字填充,產生實心文字,可以改變文字顏色 </script> <script> //線端樣式 var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d");//獲得畫筆 ctx.beginPath(); ctx.lineWidth = 15; ctx.moveTo(100, 100); ctx.lineTo(200, 100); //ctx.lineCap = "square";//線兩端的樣式。butt:原封不動;squre:方形;round:半圓; ctx.lineTo(100, 150); //ctx.lineJoin = "round";//兩條線交匯的樣式。round:圓角;bevel:截斷;miter:尖銳(設置為miter有一個miterLimit屬性,防止過分尖銳); //ctx.miterLimit = 5;//兩條線交匯,限制交匯的長度 ctx.stroke(); </script> ``` 以上是markdown格式的筆記