canvas 繪製矩形和圓形

時間 2019-12-01

標籤 canvas 繪製矩形圓形简体版

原文原文鏈接

canvas繪製有兩神方法:
1)、填充(fill)
填充是將圖形內部填滿.html

2)、繪製邊框 (stroke)
繪製邊框是不把圖形內部填滿，只是繪製圖形的外框.canvas

當咱們在繪製圖形的時候，首先要設定好繪製的樣式，而後咱們就能夠調用有關的方法進行繪製函數

fillStyle屬性
填充的樣式，在這個屬性裏面設置填入的填充顏色值編碼

strokeStyle屬性
圖形邊框的樣式，在這個屬性裏面設置填入邊框的填充顏色spa

繪製矩形案例：code

在body的屬性裏面，使用onload="draw('canvas' )「語句，調用腳本文件中的draw函數進行圖形繪畫htm

畫布的建立方法：指定 id ， width（畫布寬度）， height（畫布高度）對象

建立一個畫布，長度爲600，高度爲400blog

<body onload="draw('canvas')">
<canvas id="canvas" width="600" height="400"></canvas>
</body>

引入一個名爲canvas的is腳本，js腳本的語言編碼是utf-8utf-8

 1 function draw(id){  2     var canvas = document.getElementById(id);  3     var context = canvas.getContext('2d');  //getContext() 方法可返回一個對象
 4     context.fillStyle = "green";  // 設置或返回用於填充繪畫的顏色、漸變或模式
 5     context.strokeStyle = "#fff";  //圖形邊框的填充顏色
 6     context.lineWidth = 5;  //用寬度爲 5 像素的線條來繪製矩形：
 7     context.fillRect(0,0,400,300);  // x軸 y軸 寬 和 高 ,繪製「被填充」的矩形
 8     context.strokeRect(50,50,180,120);  //繪製矩形（無填充）
 9     context.strokeRect(110,110,180,120); 10 }

使用filiRect方法和strokeRect方法來填充矩形和繪製矩形的邊框
context. fillRect (x,y,width,height)
context.strokeRect (x,y,width,height)

這兩種方法的參數都是同樣的，x是指拒形的起點橫座標，y是指拒形的縱座標.座標的原點是canvas畫布的最左上角，

width是指拒形的長度，height是指矩形的高度.

繪製圓形案例：

建立圓形路徑時，須要使用圖形上下文對像的arc方法。

context.arc (x,y,radius,starAngle,endAngle,anticlockwise)

x是繪製圓形的起點橫座標，y是繪創圓形起點的縱座標，radius是圖形的半徑，
starAngle是開始的角度，endAngle是結束的角度·

anticlockwise是否按順時針方向繪製

繪製半徑與圓弧時指定參數爲開始弧度與結束弧度，也能夠把角度換成弧度

var radius = degrees *Math.Pl/180

這個裏面的Math.Pl表示的角度是180度，Math.Pl*2的角度是360度.

 1 function draw(id){  2             var canvas = document.getElementById(id);  3             var context = canvas.getContext('2d');  4             context.fillStyle = "#f1f2f3";  5             context.fillRect(0,0,400,400);  6             for(var i=0;i<10;i++){  7 
 8                 context.arc(i*25,i*25,i*10,0,Math.PI*2,true);  9 
10                 context.fillStyle = "rgba(255,0,0,0.25)"; 11  context.fill(); 12 
13  } 14 }

保存文件　

1 function draw(id){ 2     var canvas = document.getElementById(id); 3     var context = canvas.getContext('2d'); 4     context.fillStyle = "green"; 5     context.fillRect(0,0,400,300); 6     window.location = canvas.toDataURL('image/png'); 7 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。