<!DOCTYPE html>
<!-- Canvas是HTML5新增的組件惠呼，它就像一塊幕布凝果，可以用JavaScript在上面繪制各種圖表、動畫等跟衅。 -->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="test-stock" width="500" height="500">
<p>Current Price: 25.51</p>
</canvas>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var canvas =document.getElementById('test-stock');
if (canvas.getContext) {
console.log('瀏覽器支持canvas');
}else{
console.log('瀏覽器不支持canvas');
}
// getContext('2d')方法讓我們拿到一個CanvasRenderingContext2D對象，所有的繪圖操作都需要通過這個對象完成钉赁。
// 繪制2D圖形筋蓖。
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 200, 200);
// 擦除(0,0)位置大小為200x200的矩形，擦除的意思是把該區(qū)域變?yōu)橥该? ctx.fillStyle = '#dddddd'; // 設(shè)置顏色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小為130x130的矩形涂色
// 利用Path繪制復(fù)雜路徑:
var path=new Path2D();
// 在canvas中繪制圓形, 我們將使用以下方法:arc(x,y,r,start,stop)
path.arc(75, 75, 50, 0, Math.PI*2, true);
// moveTo(x,y) 定義線條開始坐標 lineTo(x,y) 定義線條結(jié)束坐標
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
// 使用 stroke() 方法來繪制線條:
ctx.stroke(path);
// font - 定義字體
// fillText(text,x,y) - 在 canvas 上繪制實心的文本
// strokeText(text,x,y) - 在 canvas 上繪制空心的文本
var ctx2 = canvas.getContext('2d');
//ctx2.clearRect(0, 0, 200, 200);
//創(chuàng)建漸變
var grd=ctx2.createLinearGradient(200,200,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//創(chuàng)建漸變
// var grd=ctx.createRadialGradient(200,200,200,100,100,100);
// grd.addColorStop(0,"red");
// grd.addColorStop(1,"white");
ctx2.fillStyle = grd; // 設(shè)置顏色
ctx2.fillRect(180, 10, 150, 110);
//文字陰影
ctx2.shadowOffsetX = 2;
ctx2.shadowOffsetY = 2;
ctx2.shadowBlur = 2;
ctx2.shadowColor = '#666666';
ctx2.font="25px Arial";
ctx2.strokeText("Hello World",180,30);
//ctx2.stroke();
// createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變
// createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個徑向/圓漸變
</script>
</html>
6KTJX7PR%EA{7K6A`43M~V6.png
