如何使用HTML5的Canvas圖形元素繪制圖形

1、canvas繪制矩形

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)鎮(zhèn)康免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

!DOCTYPE html

html

head lang="en"

meta charset="UTF-8"

titlecanvas繪制矩形/title

script type="text/javascript" src="canvas2.js"/script

style type="text/css"

body {

margin: 0;

padding: 0;

}

/style

/head

body onload="draw('canvas')"

canvas id="canvas" width="400" height="300"/canvas

/body

/html

js:

/**

* Created by winson on 2016/9/11.

*/

function draw(id) {

var canvas = document.getElementById(id);//用getElementById獲取到canvas對(duì)象

var context = canvas.getContext('2d');//取得上下文

context.fillStyle = "green";//繪制背景的顏色

context.strokeStyle = "#fff";//繪制邊框的顏色

context.lineWidth = 5; //設(shè)置畫筆寬度

context.fillRect(0, 0, 400, 300);//繪制

context.strokeRect(50, 50, 180, 120);

}

html5 canvas是做什么的

HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。

畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

html5 canvas繪圖有什么用

canvas能做什么?

canvas是HTML5中的新元素，你可以使用javascript用它來繪制圖形、圖標(biāo)、以及其它任何視覺性圖像。它也可用于創(chuàng)建圖片特效和動(dòng)畫。如果你掌握了完整的命令，你可以用canvas創(chuàng)建豐富的web應(yīng)用程序。如果你想很好的使用canvas，你首先應(yīng)該很好的掌握javascript。

這篇文章是一篇基礎(chǔ)教程，你能了解一些設(shè)計(jì)方法。比如用HTML5 canvas 進(jìn)行圖形設(shè)計(jì)。

用HTML5 canvas設(shè)計(jì)

設(shè)計(jì)和開發(fā)一個(gè)web頁面會(huì)包含很多的內(nèi)容，用戶首先需要有一個(gè)支持HTML canvas的瀏覽器。

首先創(chuàng)建一個(gè)HTML5文檔頁面，設(shè)置document type是HTMl5的；

其次在頁面body區(qū)域添加一個(gè)canvas標(biāo)簽：

canvas/canvas

第三、給這個(gè)canvas定義一個(gè)id屬性，這樣方便我們?cè)趈s中調(diào)用它。添加一個(gè)寬和高屬性，在canvas標(biāo)簽中添加一個(gè)當(dāng)瀏覽器不支持的時(shí)候顯示給用戶的內(nèi)容。下面是列子代碼：

canvas id="canvastest" width="500" height="600"

p你的瀏覽器不支持HTML5 canvas,請(qǐng)更新您的瀏覽器！/p

/canvas

現(xiàn)在我們創(chuàng)建了一個(gè)包含HTML5 canvas 元素的空白畫布，我們將使用js和canvas元素的方法來創(chuàng)建我們的圖像。

添加一個(gè)javascript用HTMl5 canvas的方法：

var canvasTest=document.getElementById('canvastest');//獲取canvas元素；

var testcontext=canvasTest.getContext('2d');

使用javascript來創(chuàng)建你的畫布，你可以使用矩形、圓圈和三角形,并使用線、幻燈片和漸變來創(chuàng)建你的設(shè)計(jì)。

下面是完成的代碼：

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方法里，當(dāng)文檔加載完，將會(huì)創(chuàng)建文明的圖形。

一些HTML5 canvas 圖像解決方案

用與HTML5 Canvas元素你可以開發(fā)動(dòng)態(tài)繪圖對(duì)象比如如可視化信息或數(shù)據(jù)圖。HTML5 canvas 可以在javascript的幫助下很容易的繪制二維圖形。讓我們來看一下HTML5 canvas元素的一些數(shù)據(jù)圖應(yīng)用。

1. HumbleFinance

HumbleFinance是用js開發(fā)的一個(gè)開源的數(shù)據(jù)可視化圖表，它用HTML5 canvas生成可視化圖表數(shù)據(jù)，它可以用一個(gè)軸來展示任何兩個(gè)二維的數(shù)據(jù)集。

地址：

2.Graphr

Graphr是一個(gè)用HTML5 canvas寫的一個(gè)計(jì)算器應(yīng)用，有每個(gè)圖像計(jì)算器應(yīng)有的基本功能。

地址：

3.用HTML5和jQuery創(chuàng)建的華麗的動(dòng)畫餅圖

你可以用javascript和HTML5來創(chuàng)建一個(gè)交互式餅圖，有華麗的動(dòng)畫效果。這在之前只能用flash來完成，現(xiàn)在也可以使用最新的HTML5技術(shù)了。

地址：

4. AwesomeJS

AwesomeJS 能夠讓你創(chuàng)建簡(jiǎn)單有用的圖表，而僅需幾行代碼即可。這是一個(gè)基于HTML5和canvas的javascript庫。

地址：

5.Ticker Plot（股票圖）

Ticker Plot（股票圖）是每一個(gè)在工作是使用圖標(biāo)的web開發(fā)人員都必備的一個(gè)圖表工具。這是一個(gè)開源的項(xiàng)目，它使用HTML5 canvas在畫布上繪制圖形符號(hào)和鼠標(biāo)事件。Ticker Plot（股票圖）是專門為股票行情和技術(shù)分析設(shè)計(jì)的。