A. html5 canvas怎麼畫
什麼是 Canvas?
HTML5 <canvas> 元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。
你可以通過多種方法使用Canva繪制路徑,盒、圓、字元以及添加圖像。
創建一個畫布（Canvas）
一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪制.
注意: 默認情況下 <canvas> 元素沒有邊框和內容。
<canvas>簡單實例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 標簽通常需要指定一個id屬性 (腳本中經常引用), width 和 height 屬性定義的畫布的大小.
提示:你可以在HTML頁面中使用多個 <canvas> 元素.
使用 style 屬性來添加邊框:
實例
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
使用 JavaScript 來繪制圖像
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：
實例
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
例解析:
首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然後，創建 context 對象：
var ctx=c.getContext("2d");
getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字元以及添加圖像的方法。
下面的兩行代碼繪制一個紅色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
設置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
Canvas 坐標
canvas 是一個二維網格。
canvas 的左上角坐標為 (0,0)
上面的 fillRect 方法擁有參數 (0,0,150,75)。
意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。
坐標實例
如下圖所示，畫布的 X 和 Y 坐標用於在畫布上對繪畫進行定位。滑鼠移動的矩形框上，顯示定位坐標。
X
Y
Canvas - 路徑
在Canvas上畫線，我們將使用以下兩種方法：
moveTo(x,y) 定義線條開始坐標
lineTo(x,y) 定義線條結束坐標
繪制線條我們必須使用到 "ink" 的方法，就像stroke().
實例
定義開始坐標(0,0), 和結束坐標 (200,100)。然後使用 stroke() 方法來繪制線條:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
嘗試一下 »
在canvas中繪制圓形, 我們將使用以下方法:
arc(x,y,r,start,stop)
實際上我們在繪制圓形時使用了 "ink" 的方法, 比如 stroke() 或者 fill().
實例
使用 arc() 方法 繪制一個圓:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
B. 如何使用html5的canvas 做一個曲線圖 請附小例子
在右邊在繪制一條直線角度和右邊的棱大約25°，要稍微短一些，然後連接；
在右邊在繪制一條直線角度和右邊的棱大約35°；
例子如下：
<!DOCTYPE HTML>
<html>
<title>canvas test</title>
<head>
<style>
#canvas{
width:800px;
height:800px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
margin: 10px 10px;
}
</style>
</head>
<body>
<canvas id='canvas' width=800 height=800>unsupport</canvas>
</body>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeColor = 'black';
ctx.lineWidth = 3;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 2;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.save();
ctx.translate(100, 100);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(400, 0);
ctx.moveTo(0, 0);
for(var i = 0; i < 20; i += 0.1){
var x = i * 20;
var y = Math.sin(i) * 20;
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
ctx.save();
ctx.translate(100, 200);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(400, 0);
ctx.moveTo(0, 0);
ctx.quadraticCurveTo(150, -100, 200, 0);
ctx.quadraticCurveTo(250, 200, 400, 0);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.translate(100, 400);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(400, 0);
ctx.moveTo(0, 0);
ctx.bezierCurveTo(50, 0, 100, -50, 150, -100);
ctx.bezierCurveTo(175, -75, 150, -25, 100, 0);
ctx.bezierCurveTo(300, -75, 600, -100, 400, 0);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.translate(100, 600);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(400, 0);
ctx.moveTo(0, -124);
for(var i = 0; i < 25; i += 0.1){
var x = i * 10;
var y = -(((i - 12) * (i - 12)) - 20);
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(100, 800);
ctx.stroke();
ctx.restore();
};
</script>
</html>
C. canvas前端動圖如何實現
Canvas是HTML5中的重要組成部分，用於繪制簡單的圖形，定義路徑，創建漸變及應用圖像變換，如何用Canvas製作動畫也是很多人都有的疑問。
01
什麼是動畫？我們在繪制動畫之前必須要弄清楚什麼是動畫，一個動畫最起碼需要哪些基本條件呢？我們可以用一個工具展示動畫是什麼。這是利用PPT繪制出的一個動畫效果
這樣我們就通過Canvas做出一個簡單的動態圖形了
如果你想要學習更多的新知識
如果你想要分享自己的心得
如果你熱愛前端渴望提升
D. 怎麼設置html5中canvas繪制一個圖形所需的時間
開始之前取時間戳,結束是再取,求差.
<canvas></canvas>是HTML5中新增的標簽，用於繪制圖形，實際上，這個標簽和其他的標簽一樣，其特殊之處在於該標簽可以獲取一個CanvasRenderingContext2D對象，我們可以通過JavaScript腳本來控制該對象進行繪圖。
<canvas></canvas>只是一個繪制圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在<canvas>>元素上繪圖主要有三步：
獲取<canvas>元素對應的DOM對象，這是一個Canvas對象；
調用Canvas對象的getContext()方法，得到一個CanvasRenderingContext2D對象；
調用CanvasRenderingContext2D對象進行繪圖。
E. 怎樣使用canvas繪制一個矩形
1、首先需要新建文件並創建畫布。
F. 如何利用Tkinter中Canvas繪制曲線圖，請教高手
採用tdbchart控制項
procere TForm1.Button1Click(Sender: Object);
var
LS: TLineSeries;
begin
LS := TLineSeries.Create(DBChart1); //這里假設你用的是DBChart1
LS.ParentChart := DBChart1;
LS.Title := '標題'
LS.DataSource := Adoquery1; //這里假設你用的adoquery1作為dataset
LS.XLabelsSource := '你橫坐標要顯示的欄位名稱';
LS.YValues.ValueSource := 『縱坐標的欄位名稱'; //必須是數值型
end;
G. 如何操作canvas裡面繪制的內容
畫布是一個矩形區域，您可以控制其每一像素。 canvas 擁有多種繪制路徑、矩形、圓形、字元以及添加圖像的方法。 創建 Canvas 元素 向 HTML5 頁面添加 canvas 元素。 規定元素的 id、寬度和高度： 通過 JavaScript 來繪制 canvas 元素本身是沒有...
H. 怎樣用canvas在網頁上繪制圖形
我們可以獲取canvas對象為var c=document.getElementById("myCanvas");其應有js屬性方法如下列舉：
1：繪制渲染對象，c.getContext("2d"),獲取2d繪圖對象，無論我們調用多少次獲取的對象都將是相同的對象。
2：繪制方法：
clecrRect(left,top,width,height)清除制定矩形區域，
fillRect(left,top,width,height)繪制矩形，並以fillStyle填充。
fillText（text,x,y）繪制文字；
strokeRect(left,top,width,height)繪制矩形，以strokeStyle繪制邊界。
beginPath():開啟路徑的繪制,重置path為初始狀態；
closePath():繪制路徑path結束，它會繪制一個閉合的區間，添加一條起始位置到當前坐標的閉合曲線；
moveTo（x，y）：設置繪圖其實坐標。
lineTo(x，y);繪制從當前其實位置到x，y直線。
fill（），stroke（），clip（）：在完成繪制的最後的填充和邊界輪廓，剪輯區域。
arc（）：繪制弧,圓心位置、起始弧度、終止弧度來指定圓弧的位置和大小；
rect():矩形路徑;
drawImage（Imag img）：繪制圖片；
quadraticCurveTo():二次樣條曲線路徑,參數兩個控制點；
bezierCurveTo（）：貝塞爾曲線，參數三個控制點；
createImageData,getImageData，putImageData:為Canvas中像素數據。ImageData為記錄width、height、和數據 data，其中data為我們色素的記錄為
argb，所以數組大小長度為width*height*4，順序分別為rgba。getImageData為獲取矩形區域像素，而putImageData則為設置矩形區域像素；
… and so on！
3：坐標變換：
translate（x,y）：平移變換，原點移動到坐標（x，y）；
rotate（a）：旋轉變換，旋轉a度角；
scale（x，y）：伸縮變換；
save（），restore（）：提供和一個堆棧，保存和恢復繪圖狀態，save將當前繪圖狀態壓入堆棧，restore出棧，恢復繪圖狀態；
I. canvas怎麼繪制圓行陰影
代碼：
var canvas = document.getElementById('shadowcanvas');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = '#EB852A';
ctx.shadowOffsetX = 15; // 陰影Y軸偏移
ctx.shadowOffsetY = 15; // 陰影X軸偏移
ctx.shadowBlur = 14; // 模糊尺寸
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 顏色
ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();
ctx.fillStyle = '#222222';
ctx.beginPath();
ctx.arc(350, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
這段代碼中，我們首先得到畫布並取得context，調用方法添加陰影相關屬性，包括了偏移，模糊和陰影顏色。最後調用canvas方法生成圖形，這里我們為了更好的對比效果，分別生成了2個圓形，一個包含陰影，一個不包含陰影。
J. 如何使用canvas繪制走勢圖
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。
畫布是一個矩形區域，您可以控制其每一像素。
canvas 擁有多種繪制路徑、矩形、圓形、字元以及添加圖像的方法。
創建 Canvas 元素
向 HTML5 頁面添加 canvas 元素。
規定元素的 id、寬度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通過 JavaScript 來繪制
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 來尋找 canvas 元素：
var c=document.getElementById("myCanvas");
然後，創建 context 對象：
var cxt=c.getContext("2d");
getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字元以及添加圖像的方法。
下面的兩行代碼繪制一個紅色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。
理解坐標
上面的 fillRect 方法擁有參數 (0,0,150,75)。
意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。
畫布的 X 和 Y 坐標用於在畫布上對繪畫進行定位。
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="http://www.15hhy.com"
cxt.drawImage(img,0,0);
</script>