html5canvaSLOGO
Ⅰ html5 canvas畫圖
情況說明: 圖像繪制,使用setInterval閃,沒圖像;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>我圖片</title>
</head>
<body>
<canvas id="Map" width="500" height="500" style="background:gray;"></canvas>
<script>
// 設置繪圖環境
var myMap = document.getElementById("Map");
var cxt=myMap.getContext('2d');
// 設置圖像位置初始位置變數
var x=20;
var y=20;
// 創建繪圖象,並且畫
var img =new Image();
img.src="image/gun.png";
draw();
function draw()
{
cxt.clearRect(0,0,500,500);
x+=10;
y+=50;
img.onload=function()
{
cxt.drawImage(img,x,y,80,80);
}
}
window.setInterval("draw()",100);
</script>
</body>
</html>
Ⅱ html5在canvas繪制標尺
<!>
<html>
<head>
<style>
body{
background:#eeeeee;
}
#canvas{
background:#ffffff;
cursor:pointer;
margin-left:10px;
margin-top:10px;
-webkit-box-shadow:4px4px8pxrgba(0,0,0,0.5);
-moz-box-shadow:4px4px8pxrgba(0,0,0,0.5);
box-shadow:4px4px8pxrgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvasid='canvas'width='600'height='400'>
Canvasnotsupported
</canvas>
<script>
varcanvas=document.getElementById('canvas'),
context=canvas.getContext('2d'),
AXIS_MARGIN=40,
AXIS_ORIGIN={x:AXIS_MARGIN,y:canvas.height-AXIS_MARGIN},
AXIS_TOP=AXIS_MARGIN,
AXIS_RIGHT=canvas.width-AXIS_MARGIN,
HORIZONTAL_TICK_SPACING=10,
VERTICAL_TICK_SPACING=10,
AXIS_WIDTH=AXIS_RIGHT-AXIS_ORIGIN.x,
AXIS_HEIGHT=AXIS_ORIGIN.y-AXIS_TOP,
NUM_VERTICAL_TICKS=AXIS_HEIGHT/VERTICAL_TICK_SPACING,
NUM_HORIZONTAL_TICKS=AXIS_WIDTH/HORIZONTAL_TICK_SPACING,
TICK_WIDTH=10,
TICKS_LINEWIDTH=0.5,
TICKS_COLOR='navy',
AXIS_LINEWIDTH=1.0,
AXIS_COLOR='blue';
//Functions..........................................................
functiondrawGrid(color,stepx,stepy){
context.save()
context.fillStyle='white';
context.fillRect(0,0,context.canvas.width,context.canvas.height);
context.lineWidth=0.5;
context.strokeStyle=color;
for(vari=stepx+0.5;i<context.canvas.width;i+=stepx){
context.beginPath();
context.moveTo(i,0);
context.lineTo(i,context.canvas.height);
context.stroke();
}
for(vari=stepy+0.5;i<context.canvas.height;i+=stepy){
context.beginPath();
context.moveTo(0,i);
context.lineTo(context.canvas.width,i);
context.stroke();
}
context.restore();
}
functiondrawAxes(){
context.save();
context.strokeStyle=AXIS_COLOR;
context.lineWidth=AXIS_LINEWIDTH;
drawHorizontalAxis();
drawVerticalAxis();
context.lineWidth=0.5;
context.lineWidth=TICKS_LINEWIDTH;
context.strokeStyle=TICKS_COLOR;
drawVerticalAxisTicks();
drawHorizontalAxisTicks();
context.restore();
}
functiondrawHorizontalAxis(){
context.beginPath();
context.moveTo(AXIS_ORIGIN.x,AXIS_ORIGIN.y);
context.lineTo(AXIS_RIGHT,AXIS_ORIGIN.y)
context.stroke();
}
functiondrawVerticalAxis(){
context.beginPath();
context.moveTo(AXIS_ORIGIN.x,AXIS_ORIGIN.y);
context.lineTo(AXIS_ORIGIN.x,AXIS_TOP);
context.stroke();
}
functiondrawVerticalAxisTicks(){
vardeltaY;
for(vari=1;i<NUM_VERTICAL_TICKS;++i){
context.beginPath();
if(i%5===0)deltaX=TICK_WIDTH;
elsedeltaX=TICK_WIDTH/2;
context.moveTo(AXIS_ORIGIN.x-deltaX,
AXIS_ORIGIN.y-i*VERTICAL_TICK_SPACING);
context.lineTo(AXIS_ORIGIN.x+deltaX,
AXIS_ORIGIN.y-i*VERTICAL_TICK_SPACING);
context.stroke();
}
}
(){
vardeltaY;
for(vari=1;i<NUM_HORIZONTAL_TICKS;++i){
context.beginPath();
if(i%5===0)deltaY=TICK_WIDTH;
elsedeltaY=TICK_WIDTH/2;
context.moveTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING,
AXIS_ORIGIN.y-deltaY);
context.lineTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING,
AXIS_ORIGIN.y+deltaY);
context.stroke();
}
}
//Initialization................................................
drawGrid('lightgray',10,10);
drawAxes();
</script>
</body>
</html>
Ⅲ 如何使html5 <canvas>
1.現在head設置canvas的背景顏色
2.然後在body裡面寫<canvas>***</canvas>.中間內容是給不能版支持canvas元素的瀏覽器權顯示用的。
3.然後寫js文件，<script type='text/javascript'>
var canvas=document.getElementById（『canvas』）；
var c=canvas.getContext（『2d』）；
接下去就是繪制方法了，詳情請網路，，，因為比較多。。。。
Ⅳ 使用HTML5 Canvas 畫出以下圖形！
<!DOCTYPEHTML>
<html>
<style>
#myCanvas{
width:400px;
height:200px;
}
</style>
<body>
<canvasid="myCanvas"></canvas>
<scripttype="text/javascript">
varcanvas=document.getElementById('myCanvas');
varc=canvas.getContext('2d');
//紅色
c.fillStyle='#f00';
c.fillRect(0,0,10,10);
c.fillStyle='#f22';
c.fillRect(0,12,10,10);
c.fillStyle='#f44';
c.fillRect(0,24,10,10);
c.fillStyle='#f88';
c.fillRect(0,36,10,10);
c.fillStyle='#faa';
c.fillRect(0,48,10,10);
c.fillStyle='#fcc';
c.fillRect(0,60,10,10);
c.fillStyle='#fee';
c.fillRect(0,72,10,10);
//紫色
c.fillStyle='#f0a';
c.fillRect(12,0,10,10);
c.fillStyle='#e550a1';
c.fillRect(12,12,10,10);
c.fillStyle='#e960a8';
c.fillRect(12,24,10,10);
c.fillStyle='#ed86db';
c.fillRect(12,36,10,10);
c.fillStyle='#f2a6cd';
c.fillRect(12,48,10,10);
c.fillStyle='#f7c0dd';
c.fillRect(12,60,10,10);
c.fillStyle='#fce2ef';
c.fillRect(12,72,10,10);
</script>
</body>
</html>
Ⅳ html5 canvas繪圖有什麼用
canvas能做什麼?
canvas是HTML5中的新元素，你可以使用javascript用它來繪制圖形、圖標、以及其它任何視覺性圖像。它也可用於創建圖片特效和動畫。如果你掌握了完整的命令，你可以用canvas創建豐富的web應用程序。如果你想很好的使用canvas，你首先應該很好的掌握javascript。
這篇文章是一篇基礎教程，你能了解一些設計方法。比如用HTML5 canvas 進行圖形設計。
用HTML5 canvas設計
設計和開發一個web頁面會包含很多的內容，用戶首先需要有一個支持HTML canvas的瀏覽器。
首先創建一個HTML5文檔頁面，設置document type是HTMl5的；
其次在頁面body區域添加一個canvas標簽：
<canvas></canvas>
第三、給這個canvas定義一個id屬性，這樣方便我們在js中調用它。添加一個寬和高屬性，在canvas標簽中添加一個當瀏覽器不支持的時候顯示給用戶的內容。下面是列子代碼：
<canvas id="canvastest" width="500" height="600">
<p>你的瀏覽器不支持HTML5 canvas,請更新您的瀏覽器！</p>
</canvas>
現在我們創建了一個包含HTML5 canvas 元素的空白畫布，我們將使用js和canvas元素的方法來創建我們的圖像。
添加一個javascript用HTMl5 canvas的方法：
var canvasTest=document.getElementById('canvastest');//獲取canvas元素；
var testcontext=canvasTest.getContext('2d');
使用javascript來創建你的畫布，你可以使用矩形、圓圈和三角形,並使用線、幻燈片和漸變來創建你的設計。
下面是完成的代碼：
var canvasTest=document.getElementById('canvastest');
var testcontext=canvasTest.getContext('2d');
// create rectangle
testcontext.fillStyle='rgb(0,125,125)';
testcontext.fillRect(10,10,250,180);
// create circle
testcontext.beginPath();
testcontext.arc(300, 340, 100, 0, Math.PI * 2, true);
testcontext.closePath();
testcontext.fillStyle='rgb(75,10,125)';
testcontext.fill();
testcontext.stroke();
我們可以將上面的代碼加入window.onload，或者jQuery的ready方法里，當文檔載入完，將會創建文明的圖形。
一些HTML5 canvas 圖像解決方案
用與HTML5 Canvas元素你可以開發動態繪圖對象比如如可視化信息或數據圖。HTML5 canvas 可以在javascript的幫助下很容易的繪制二維圖形。讓我們來看一下HTML5 canvas元素的一些數據圖應用。
1. HumbleFinance
HumbleFinance是用js開發的一個開源的數據可視化圖表，它用HTML5 canvas生成可視化圖表數據，它可以用一個軸來展示任何兩個二維的數據集。
地址： http://www.humblesoftware.com/finance/index
2.Graphr
Graphr是一個用HTML5 canvas寫的一個計算器應用，有每個圖像計算器應有的基本功能。
地址：http://www.graphr.org/
3.用HTML5和jQuery創建的華麗的動畫餅圖
你可以用javascript和HTML5來創建一個互動式餅圖，有華麗的動畫效果。這在之前只能用flash來完成，現在也可以使用最新的HTML5技術了。
地址：http://cyberpython.github.com/AwesomeChartJS/
4. AwesomeJS
AwesomeJS 能夠讓你創建簡單有用的圖表，而僅需幾行代碼即可。這是一個基於HTML5和canvas的javascript庫。
地址：http://cyberpython.github.com/AwesomeChartJS/
5.Ticker Plot（股票圖）
Ticker Plot（股票圖）是每一個在工作是使用圖標的web開發人員都必備的一個圖表工具。這是一個開源的項目，它使用HTML5 canvas在畫布上繪制圖形符號和滑鼠事件。Ticker Plot（股票圖）是專門為股票行情和技術分析設計的。
Ⅵ html5 canvas怎麼載入圖像
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
image.onload = function(){cxt.drawImage(img,0,0)}
</script>
Ⅶ 如何在HTML5 Canvas 裡面顯示 Font Awesome 圖標
Font Awesome 是一套完美的圖標字體,主要目的是和 Bootstrap 搭配使用. 提供的CSS 已經可以完美顯示這些圖標在網頁裡面。最新的版本4.3 裡面，已經提供519 Icons。 這些圖標廣泛應用在web應用裡面。如何在HTML5 Canvas 里去顯示這些圖標呢？經過一通學習，終於找到好的方案。 Font Awesome 是一套圖標字型檔，提供了幾種矢量字體
TTF或.OTF，適用於Firefox 、Safari、Opera
.EOT，適用於Internet Explorer 4.0+
.SVG，適用於Chrome、IPhone
.WOFF 知用於Chrome、Firefox
但它的內容是用Unicode 做編碼的。在當字體顯示的時候，我們要先獲得圖標的Unicode,基本思路是
1. 將Font Awesome 的字體文件拷貝到伺服器的字體目錄裡面
2. 設置Canvas 的字體， ctx.font="12px fontawesome"
3. 調用Canvas API ctx.fillText(text,x,y). 這里text 就是 圖標的Unicode。
結果顯示的就是Unicode代表的圖標了.
其他相關的技巧
1. 如果沒有許可權或者不想拷貝字體到伺服器的字體目錄里怎麼辦？
可以採用動態調用指定文件字體的方法。在程序里動態載入指定目錄下的字體文件。
如果不知怎麼做？可以使用Font.js，項目在https://github.com/Pomax/Font.js
Ⅷ canvas的HTML5新增標簽
定義和用法：
Canvas 對象表示一個 HTML 畫布元素 -<canvas>。它沒有自己的行為，但是定義了一個 API 支持腳本化客戶端繪圖操作。
你可以直接在該對象上指定寬度和高度，但是，其大多數功能都可以通過CanvasRenderingContext2D 對象獲得。 這是通過 Canvas 對象的getContext() 方法並且把直接量字元串 2d 作為唯一的參數傳遞給它而獲得的。
<canvas> 標記在 Safari 1.3 中引入，在製作此參考頁時，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas> 標記及其 API 可以使用位於excanvas點sourceforge點net的 ExplorerCanvas 開源項目來模擬。
提示：如果希望學習如何使用 <canvas> 來繪制圖形，可以訪問 Mozilla 提供的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 草案中一個正式的標簽。 <canvas> 標記和 SVG 以及 VML 之間的一個重要的不同是，<canvas> 有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。
這兩種方式在功能上是等同的，任何一種都可以用另一種來模擬。從表面上看，它們很不相同，可是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。
要從同一圖形的一個 <canvas> 標記中移除元素，往往需要擦掉繪圖重新繪制它。 大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的getContext() 方法獲得的一個「繪圖環境」對象上。
Canvas API 也使用了路徑的表示法。但是，路徑由一系列的方法調用來定義，而不是描述為字母和數字的字元串，比如調用 beginPath() 和 arc() 方法。
一旦定義了路徑，其他的方法，如 fill()，都是對此路徑操作。繪圖環境的各種屬性，比如 fillStyle，說明了這些操作如何使用。
注釋：Canvas API 非常緊湊的一個原因上它沒有對繪制文本提供任何支持。要把文本加入到一個 <canvas> 圖形，必須要麼自己繪制它再用點陣圖圖像合並它，或者在 <canvas> 上方使用 CSS 定位來覆蓋 HTML 文本。 height 屬性
畫布的高度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口高度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。
width 屬性
畫布的寬度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。 方法 描述 getContext() 返回一個用於在畫布上繪圖的環境。 例子
<!DOCTYPE HTML>
<html>
<body>
<canvas id=myCanvas>your browser does not support the canvas tag </canvas>
<script type=text/javascript>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>
Ⅸ 怎樣在html5中添加canvas標簽
<canvas> 標簽是 HTML 5 中的新標簽。
定義和用法
<canvas> 標簽定義圖形，比如圖表和其他圖像。
<canvas> 標簽只是圖形容器，您必內須使用腳本來繪制圖容形。
實例
通過 canvas 元素來顯示一個紅色的矩形：
<!DOCTYPEHTML>
<html>
<head>
<scripttype="text/javascript">
varcanvas=document.getElementById('myCanvas');
varctx=canvas.getContext('24d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</head>
<body>
<canvasid="myCanvas"></canvas>
</body>
</html>