18126.HTML5CSS3的學習(八)——HTML5繪圖(一) -开发者知识库

18126.HTML5CSS3的學習(八)——HTML5繪圖(一) -开发者知识库,第1张

五.HTML5繪圖
(一).HTML5canvas基礎

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<!--canvas元素能夠在網頁中創建一塊矩形區域,這塊矩形區域被稱為畫布,在其中可以繪制各種圖形-->
<canvas id="myCanvas" width="200" height="100"></canvas>

<!--可以使用CSS控制canvas元素的外觀-->
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>

<!--繪制圖形的工作需要使用JavaScript來實現-->
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.fillStyle = "#FF00FF";
context.fillRect(50, 25, 100, 50);
</script>

<!--canvas僅僅是圖形的容器,使用canvas對象的getContext()
方法可以返回一個對象,該對象提供了用於在畫布上繪圖的方法和屬性-->

<canvas id="myCanvas" style="border:1px solid;" width="200" height="100">
您的瀏覽器不支持canvas元素,請更新或更換您的瀏覽器。
<!---->
<canvas id="myCanvas" width="200" height="100">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
if(canvas.getContext) {
alert("您的瀏覽器支持canvas!");
} else {
alert("您的瀏覽器不支持canvas!");
}
</script>
</body>

</html>

18126.HTML5CSS3的學習(八)——HTML5繪圖(一) -开发者知识库,這里寫圖片描述,第2张
18126.HTML5CSS3的學習(八)——HTML5繪圖(一) -开发者知识库,這里寫圖片描述,第3张

(二).繪制圖形

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<!--繪制直線
moveTo():將光標移動到指定坐標點
lineTo():在moveTo方法指定的起點與本方法的參數指定的終點之間繪制一條直線。
-->

<canvas id="myCanvas1" style="border:1px solid;" width="200" height="100"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas1");
var context = c.getContext("2d");
context.moveTo(0, 0);
context.lineTo(200, 100);
context.stroke();
</script>

<!--循環調用lineTo()方法來繪制復雜圖形-->
<canvas id="myCanvas2" style="border:1px solid;" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas2");
var context = canvas.getContext('2d');
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = 'rgb(100,255,100)';
context.strokeStyle = 'rgb(0,0,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
for(var i = 0; i < 30; i ) {
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();
</script>

<!--繪制矩形,有填充(fill)和繪制邊框(stroke)兩種方式
fillStyle:該屬性設定填充圖形的樣式,如設置填充的顏色值
strokeStyle:該屬性設定圖形邊框的樣式,如設置邊框的顏色值
lineWidth:該屬性設置圖形邊框的寬度。
fillRect():該方法繪制被填充的圖形
-->

<canvas id="myCanvas3" style="border:1px solid;" width="300" height="150"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas3");
var context = c.getContext("2d");
context.fillStyle = "#FF00FF";
context.fillRect(0, 0, 200, 100);
</script>
<br />
<!--繪制五個顏色相同的矩形 -->
<canvas id="myCanvas4" style="border:1px solid;" width="300" height="150"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas4");
var context = c.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(0, 0, 10, 10);
context.fillStyle = "red";
context.fillRect(20, 20, 10, 10);
context.fillStyle = "rgb(255,0,0)";
context.fillRect(40, 40, 10, 10);
context.fillStyle = "rgb(100%,0%,0%)";
context.fillRect(60, 60, 10, 10);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(80, 80, 10, 10);
</script>

<!--繪制圓形。
beginPath():開始一條路徑,或重置當前的路徑
arc():創建弧或曲線,用於繪制圓或部分圓
參數x,y(圓中心的x,y坐標),r(圓的半徑),sAngle(起始角),
eAngle(結束角),counterclockwise(規定順逆指針繪圖);
closePath():創建從當前點到開始點的路徑,相當於閉合路徑操作;
fill():填充當前路徑,默認值為黑色
stroke():繪制已定義的路徑,默認值為黑色 -->

<canvas id="myCanvas5" style="border:1px solid;" width="300" height="150"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas5");
var context = c.getContext("2d");
context.fillStyle = "#FF00FF";
context.beginPath();
context.arc(100, 75, 50, 0, Math.PI * 2, true);
context.closePath();
context.fill();
</script>

<!--繪制多條有規律的弧形-->
<canvas id="myCanvas6" style="border:1px solid;" width="300" height="150"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas6");
var context = c.getContext("2d");
for(var i = 0; i < 15; i ) {
context.strokeStyle = "#FF00FF";
context.beginPath();
context.arc(0, 150, i * 10, 0, Math.PI * 3 / 2, true);
context.stroke();
}
</script>

<!--制造封閉路徑-->
<canvas id="myCanvas7" style="border:1px solid;" width="300" height="150"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas7");
var context = c.getContext("2d");
for(var i = 0; i < 15; i ) {
context.strokeStyle = "#FF00FF";
context.beginPath();
context.arc(0, 150, i * 10, 0, Math.PI * 3 / 2, true);
context.closePath();
context.stroke();
}
</script>

<!--繪制多邊形 -->
<canvas id="myCanvas8" style="border:1px solid;" width="200" height="200"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas8");
var context = c.getContext("2d");
context.fillStyle = "red";
context.beginPath();
context.moveTo(25, 25);
context.lineTo(150, 25);
context.lineTo(25, 150);
context.fill();
context.strokeStyle = "red";
context.beginPath();
context.moveTo(25, 150);
context.lineTo(150, 25);
context.lineTo(150, 150);
context.closePath();
context.stroke();
</script>
<!--繪制曲線
arcTo():lineTo()的曲線版,創建兩條切線之間的弧或曲線
x1,y1:弧起點坐標 x2,y2:弧終點坐標,r:弧的半徑
-->

<canvas id="myCanvas9" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas9");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20); // 設置起點
ctx.lineTo(100, 20); // 繪制水平直線
ctx.arcTo(150, 20, 150, 70, 50); // 繪制曲線
ctx.lineTo(150, 120); // 繪制垂直直線
ctx.stroke(); // 開始繪制
</script>

<!--繪制二次方曲線
使用quadraticCurveTo()方法可以繪制二次方貝塞爾曲線
cpx,cpy:貝塞爾控制點的坐標;x,y:結束點的x,y坐標
-->

<canvas id="myCanvas10" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas10");
var context = c.getContext("2d");
// 下面開始繪制二次方貝塞爾曲線。
context.strokeStyle = "dark";
context.beginPath();
context.moveTo(0, 200);
context.quadraticCurveTo(75, 50, 300, 200);
context.stroke();
context.globalCompositeOperation = "source-over";
// 下面繪制的直線用於表示上面曲線的控制點和控制線,控制點坐標即兩直線的交點(75,50)。
context.strokeStyle = "#ff00ff";
context.beginPath();
context.moveTo(75, 50);
context.lineTo(0, 200);
context.moveTo(75, 50);
context.lineTo(300, 200);
context.stroke();
</script>

<!--繪制三次方曲線
使用bezierCurveTo()方法可以繪制三次方貝塞爾曲線
cp1x,cp1y:第一個貝塞爾控制點的坐標;
cp2x,cp2y:第二個貝塞爾控制點的坐標;
x,y:結束點的坐標-->

<canvas id="myCanvas11" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas11");
var context = c.getContext("2d");
// 下面開始繪制三次方貝塞爾曲線。
context.strokeStyle = "dark";
context.beginPath();
context.moveTo(0, 200);
context.bezierCurveTo(25, 50, 75, 50, 300, 200);
context.stroke();
context.globalCompositeOperation = "source-over";
// 下面繪制的直線用於表示上面曲線的控制點和控制線,控制點坐標為(25,50)和(75,50)。
context.strokeStyle = "#ff00ff";
context.beginPath();
context.moveTo(25, 50);
context.lineTo(0, 200);
context.moveTo(75, 50);
context.lineTo(300, 200);
context.stroke();
</script>

</body>

</html>

運行結果:
18126.HTML5CSS3的學習(八)——HTML5繪圖(一) -开发者知识库,這里寫圖片描述,第4张

(三)設置圖形樣式

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<!--設置線型
lineCap:設置或返回線條的結束端點樣式
lineJoin:設置或返回兩條相交,所創建的拐角類型
lineWidth:設置或返回當前的線條寬度
miterLimit:設置或返回最大斜接長度
-->

<!--lineWidth(設置線條的粗細)-->
<canvas id="myCanvas1" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas1').getContext('2d');
for(var i = 0; i < 12; i ) {
ctx.strokeStyle = "red";
ctx.lineWidth = 1 i;
ctx.beginPath();
ctx.moveTo(5, 5 i * 14);
ctx.lineTo(140, 5 i * 14);
ctx.stroke();
}
</script>
<!--lineCap(設置端點樣式)-->
<canvas id="myCanvas2" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas2').getContext('2d');
var lineCap = ['butt', 'round', 'square'];
// 繪制參考線。
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(10, 150);
ctx.moveTo(150, 10);
ctx.lineTo(150, 150);
ctx.stroke();
// 繪制直線段。
ctx.strokeStyle = 'blue';
for(var i = 0; i < lineCap.length; i ) {
ctx.lineWidth = 20;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(10, 30 i * 50);
ctx.lineTo(150, 30 i * 50);
ctx.stroke();
}
</script>
<!--lineJoin設置鏈接處樣式,包括round、bevel、miter。默認值為miter-->
<canvas id="myCanvas3" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas3').getContext('2d');
var lineJoin = ['round', 'bevel', 'miter'];
ctx.strokeStyle = 'blue';
for(var i = 0; i < lineJoin.length; i ) {
ctx.lineWidth = 25;
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(10 i * 150, 30);
ctx.lineTo(100 i * 150, 30);
ctx.lineTo(100 i * 150, 100);
ctx.stroke();
}
</script>
<!--miterLimit設置繪制交點的方式,其作用是為斜面的長度設置一個上限-->
<canvas id="myCanvas4" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas4').getContext('2d');
for(var i = 1; i < 10; i ) {
ctx.strokeStyle = 'blue';
ctx.lineWidth = 10;
ctx.lineJoin = 'miter';
ctx.miterLimit = i * 10;
ctx.beginPath();
ctx.moveTo(10, i * 30);
ctx.lineTo(100, i * 30);
ctx.lineTo(10, 33 * i);
ctx.stroke();
}
</script>

<!--繪制線性漸變
在canvas中可以繪制線性或徑向的漸變。
首先使用createLinearGradient()方法創建canvasGradient對象
然后使用addColorStop()方法進行上色-->

<canvas id="myCanvas5" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas5').getContext('2d');
var lingrad = ctx.createLinearGradient(0, 0, 0, 200);
lingrad.addColorStop(0, '#ff0000');
lingrad.addColorStop(1 / 7, '#ff9900');
lingrad.addColorStop(2 / 7, '#ffff00');
lingrad.addColorStop(3 / 7, '#00ff00');
lingrad.addColorStop(4 / 7, '#00ffff');
lingrad.addColorStop(5 / 7, '#0000ff');
lingrad.addColorStop(6 / 7, '#ff00ff');
lingrad.addColorStop(1, '#ff0000');
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad;
ctx.fillRect(10, 10, 200, 200);
</script>

<!--繪制徑向漸變
首先使用createRadialGradient()方法創建canvasGrradient對象
然后使用addColorStop()方法進行上色-->

<canvas id="myCanvas6" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas6').getContext('2d');
var radgrad = ctx.createRadialGradient(55, 55, 20, 100, 100, 90);
radgrad.addColorStop(0, '#ffffff');
radgrad.addColorStop(0.75, '#333333');
radgrad.addColorStop(1, '#000000');
ctx.fillStyle = radgrad;
ctx.fillRect(10, 10, 200, 200);
</script>

<!--繪制圖案
在canvas中, 使用createPattern()方法可以繪制圖案效果
image:規定要使用的圖片、畫布或視頻元素
repeat:默認值。該模式在水平和垂直方向重復
repeat-x:該模式只在水平方向重復
repeat-y:該模式只在垂直方向重復
no-repeat:該模式只顯示一次-->

<canvas id="myCanvas7" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx1 = document.getElementById('myCanvas7').getContext('2d');
// 創建用於圖案的新image對象。
var img = new Image();
img.src = 'img/pattern.png';
img.onload = function() {
// 創建圖案。
var ptrn = ctx1.createPattern(img, 'repeat');
ctx1.fillStyle = ptrn;
ctx1.fillRect(0, 0, 600, 600);
}
</script>

<!--設置不透明度
使用globalAlpha全局屬性可以設置繪制圖形的不透明度
也可以通過色彩的不透明度參數來為圖形設置不透明度-->

<canvas id="myCanvas8" style="border:1px solid;" width="500" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas8').getContext("2d");
ctx.translate(200, 20);
for(var i = 1; i < 50; i ) {
ctx.save();
ctx.transform(0.95, 0, 0, 0.95, 30, 30);
ctx.rotate(Math.PI / 12);
ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,' (1 - (i 10) / 40) ')';
ctx.arc(0, 0, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
</script>

<!--設置陰影
shadowColor:設置或返回用於陰影的顏色
shadowBlue:設置或返回於陰影的模糊級別
shadowOffsetX:設置或返回陰影距形狀的水平距離
shadowOffsetY:設置或返回陰影距形狀的垂直距離-->

<canvas id="myCanvas9" style="border:1px solid;" width="400" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas9').getContext('2d');
// 設置陰影。
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
// 繪制矩形。
ctx.fillStyle = "#33ccff";
ctx.fillRect(20, 20, 300, 60);
ctx.fill();
// 繪制文本。
ctx.font = "45px 黑體";
ctx.fillStyle = "white";
ctx.fillText("HTML5 CSS3", 30, 64);
</script>
</body>

</html>

運行結果:
18126.HTML5CSS3的學習(八)——HTML5繪圖(一) -开发者知识库,這里寫圖片描述,第5张

學習心得:
今天白天有事沒有學習,晚上沉迷學習不能自拔。。。
這一章算是完全超越了自己以前學習的HTML方面的知識,沒有實踐過,而且自從上學期圖形學考了95之后突然喜歡上了畫圖類的。。。算是撈着了,還有一部分內容沒學完,明日再戰。

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复