IT培訓(xùn)網(wǎng)
IT在線學(xué)習(xí)
四、 設(shè)置繪制樣式
設(shè)置繪制樣式,需要使用fillStyle。fillStyle 屬性設(shè)置或返回用于填充繪畫的顏色、漸變或模式。
語法:context.fillStyle=color|gradient|pattern;
color:指示繪圖填充色的 CSS 顏色值。默認(rèn)值是 #000000;
gradient:用于填充繪圖的漸變對象(線性或放射性);
pattern:用于填充繪圖的 pattern 對象。
這里我們需要使用fillStyle來設(shè)置顏色。
五、 填充圖形
我們需要使用fill()方法來填充已經(jīng)設(shè)置好的圓形。
fill() 方法填充當(dāng)前的圖像(路徑)。默認(rèn)顏色是黑色。
語法:
context.fill();
六、 利用上面學(xué)會的內(nèi)容我們先來繪制一個圓形
我們在寬500像素,高500像素,邊框是1像素黑色實線的畫布中,繪制一個圓心在x軸25像素,y軸25像素,半徑是10像素,起始角是0,結(jié)束角是2*PI,逆時針,填充顏色是半透明的綠色的圓形。
具體代碼如下:
- >
- <html>
- <head>
- <meta charset="UTF-8">
- <title>使用canvas繪制圓形title>
- <style>
- #canvas{
- border:1px solid #000;
- }
- style>
- head>
- <body>
- <canvas width="500" height="500" id="canvas">canvas>
- <script>
- var myCanva = document.getElementById("canvas");
- var ctx = myCanva.getContext("2d");
- ctx.beginPath();
- ctx.arc(25, 25, 10, 0, Math.PI * 2, true);
- ctx.closePath();
- ctx.fillStyle = 'rgba(0,255,0,0.25)';
- ctx.fill();
- script>
- body>
- html>
七、 繪制文中一開始提到的圖,只需要加一個循環(huán)就可以實現(xiàn)了。
具體代碼如下:
- >
- <html>
- <head>
- <meta charset="UTF-8">
- <title>使用canvas繪制圓形title>
- <style>
- #canvas{
- border:1px solid #000;
- }
- style>
- head>
- <body>
- <canvas width="500" height="500" id="canvas">canvas>
- <script>
- var myCanva = document.getElementById("canvas");
- var ctx = myCanva.getContext("2d");
- for(var i = 0; i < 10; i++){
- ctx.beginPath();
- ctx.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
- ctx.closePath();
- ctx.fillStyle = 'rgba(0,255,0,0.25)';
- ctx.fill();
- }
- script>
- body>
- html>
這段代碼運行的結(jié)果如下圖:
>>本文地址:http://uj2y2uok.com/zhuanye/2020/48620.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個方向的工作?