1. 如何使用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>
2. html js canvas 對象 代碼查錯。。。。。
var a = new o;?這是要干什麼。這句話就會報錯。除了js內置的對象外，new 關鍵字只能用來接一個方法。即一個對象的構造方法。
3. html5 兩個canvas重疊放在一個div裡面，每個canvas各填充一張圖片，代碼怎麼寫
1、首先素材准備，基本框架的建立。這里讓一個有字的圖片從左到右運動起來。
4. 會canvas 畫布的，求教一下如下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas 方塊自身旋轉放大縮小</title>
<style type="text/css">
body{ background:#999; }
#drawCanvas{ background:#fff; }
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("drawCanvas");
var ctx=canvas.getContext("2d");
var num=0;
setInterval(function(){
num++
ctx.save()
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.translate(150,150)
ctx.rotate(num*Math.PI/180)
ctx.fillRect(0,0,100,100)
ctx.restore()
},30)
}
</script>
</head>
<body>
<canvas id="drawCanvas" width="500" height="500" style="background:#eee;" ></canvas>
</body>
</html>
把ctx.translate(150,150)放到
ctx.clearRect(0,0,canvas.width,canvas.height)後面即可
5. 請教如何通過代碼獲取Canvas
我假設Canvas的Name="x1"設置是x1.SetValue(Canvas.ZIndexProperty,10);獲取是x1.GetValue(Canvas.ZIndexProperty);
6. 使用Canvas畫布結合JavaScript繪制以下圖形，寫出源代碼和運行截圖
<!DOCTYPEhtml>
<html>
<head>
</head>
<bodyalign="center">
<canvasid="drawing"width="400"height="400">Adrawingofsomeing!</canvas>
<scripttype="text/javascript">
//繪制餅圖
vardrawCircle=function(canvasId,data_arr,color_arr){
vardrawing=document.getElementById(canvasId);
if(drawing.getContext){
varcontext=drawing.getContext('2d');
varradius=drawing.height/2-20,//半徑
ox=radius+20,oy=radius+20;//圓心
varwidth=30,height=10,//圖例寬高
posX=ox*2+20,posY=30;//圖例位置
vartextX=posX+width+5,textY=posY+10;//文本位置
varstartAngle=0,endAngle=0;//起始、結束弧度
context.strokeStyle='Purple';
context.lineWidth=3;
context.strokeRect(0,0,drawing.width,drawing.height);
for(vari=0,len=data_arr.length;i<len;i++){
//繪制餅圖
endAngle+=data_arr[i]*2*Math.PI;
context.fillStyle=color_arr[i];
context.beginPath();
context.moveTo(ox,oy);
context.arc(ox,oy,radius,startAngle,endAngle,false);
context.closePath();
context.fill();
startAngle=endAngle;
}
}
};
varinit=function(){
vardata_arr=[0.05,0.25,0.6,0.1],
color_arr=['#00FF21','#FFAA00','#00AABB','#FF4400'];
drawCircle('drawing',data_arr,color_arr);
};
init();
</script>
</body>
</html>
7. 誰幫我幫我看一段 html5 canvas的代碼 不知道哪錯了，顯示不出效果
你這代碼是手打的嗎？
varcanvas=document.getElementById=('mc');
應該是
varcanvas=document.getElementById('mc');
多了一個等號
所有
ctx.fillRect|
後面多了一個|（豎杠），應該去掉
所有
strokRect
少了一個e，應該是
strokeRect
<html>
<head>
</head>
<body>
<canvas id="mc" width="400" height="280"
style="border:1px solid black"></canvas>
<script type="text/javascript">
//獲取canvas元素對應的DOM對象
var canvas=document.getElementById('mc');
//獲取在canvas上繪圖的CanvasRenderingContext2D對象
var ctx=canvas.getContext(ƈd');
//設置填充顏色
ctx.fillStyle = "red";
//填充矩形
ctx.fillRect(30,20,120,60);
//設置線條顏色
ctx.strokeStyle = "#ff0";
//填充一個矩形
ctx.fillRect(80,60,120,60);
//設置線條顏色
ctx.strokeStyle="#00f";
//設置線條寬度
ctx.lineWidth = 10;
//繪制一個矩形邊框
ctx.strokeRect(30,130,120,60);
//設置線條顏色
ctx.strokeStyle="#0ff";
//設置線條寬度
ctx.strokeStyle = "round";
//繪制一個舉行邊框
ctx.strokeRect(80,160,120,60);
//設置線條顏色
ctx.strokeStyle="#f0f";
//設置線條寬度
ctx.strokeStyle = "bevel";
//繪制一個舉行邊框
ctx.strokeRect(130,190,120,60);
</script>
</body>
</html>
8. html5中的canvas代碼應用
傷不起啊，你沒有IDE嗎，我復制進去立馬就報錯了，
cxt.fillStyle='rgb(240,'+Math.floor(255-11.5*i)+','+Math.floor(255-11.5*j)+')';
9. html5 canvas繪圖有什麼用
html5 canvas 元素的作用就是描繪出圖形，比如畫圓，扇形，折線圖等，有了這個，這些功能都是很好實現的。
10. canvas的<canvas> 的歷史
這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
<canvas> 標記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對 HTML 的這一根本擴展的原因在於，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 組件所使用，並且 Apple 希望有一種方式在 Dashboard 中支持腳本化的圖形。
Firefox 1.5 和 Opera 9 都跟隨了 Safari 的引領。這兩個瀏覽器都支持 <canvas> 標記。
我們甚至可以在 IE 中使用 <canvas> 標記，並在 IE 的 VML 支持的基礎上用開源的 JavaScript 代碼（由 Google 發起）來構建兼容性的畫布。
<canvas> 的標准化的努力由一個 Web 瀏覽器廠商的非正式協會在推進，目前 <canvas> 已經成為 HTML 5 草案中一個正式的標簽。