pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

HTML 5 canvas基本語法

HTML 5 canvas 基本語法 作者 Mihai Sucan 2009年1月8日 本文翻譯自 HTML 5 canvas - the basics 目錄 簡述 canvas 基礎(chǔ) 2D context API 基本線條 路徑 插入圖像 像素級操作 文字 陰影 顏色漸變 小節(jié) 簡述 HTM

HTML 5 canvas —— 基本語法

作者 Mihai Sucan · 2009年1月8日

本文翻譯自 HTML 5 canvas - the basics

目錄

簡述

HTML 5 規(guī)范引進(jìn)了很多新特性,其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通過 JavaScript 繪制圖形的方法,此方法使用簡單但功能強(qiáng)大。每一個 canvas 元素都有一個"上下文( context )" (想象成繪圖板上的一頁),在其中可以繪制任意圖形。瀏覽器支持多個 canvas 上下文,并通過不同的 API 提供圖形繪制功能。

大部分的瀏覽器都支持 2D canvas 上下文——包括 Opera, Firefox, KonquerorSafari。而且某些版本的 Opera 還支持 3D canvas ,F(xiàn)irefox 也可以通過插件形式支持 3D canvas :

本文介紹 2D canvas
基礎(chǔ)以及如何使用基本 canvas 函數(shù),如線條、形狀、圖像和文字等。為了理解此文章,你最好了解 JavaScript 基礎(chǔ)知識。

可以點(diǎn)擊此處批量下載本文實(shí)例代碼

canvas 基礎(chǔ)

創(chuàng)建 canvas 的方法很簡單,只需要在 HTML 頁面中添加 <canvas> 元素:

<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>

為了能在 JavaScript 中引用元素,最好給元素設(shè)置 ID ;也需要給 canvas 設(shè)定高度和寬度。

創(chuàng)建好了畫布后,讓我們來準(zhǔn)備畫筆。要在畫布中繪制圖形需要使用 JavaScript 。首先通過 getElementById 函數(shù)找到 canvas
元素,然后初始化上下文。之后可以使用上下文 API 繪制各種圖形。下面的腳本在 canvas 中繪制一個矩形 (點(diǎn)擊此處查看效果):

// Get a reference to the element.
var elem = document.getElementById('myCanvas');

// Always check for properties 和 methods, to make sure your code doesn't break 
// in other browsers.
if (elem && elem.getContext) {
  // Get the 2d context.
  // Remember: you can only initialize one context per element.
  var context = elem.getContext('2d');
  if (context) {
    // You are done! Now you can draw your first rectangle.
    // You only need to provide the (x,y) coordinates, followed by the width and 
    // height dimensions.
    context.fillRect(0, 0, 150, 100);
  }
}

可以把上面代碼放置在文檔 head 部分中,或者放在外部文件中。

2D context API

介紹了如何創(chuàng)建 canvas 后,讓我們來看看 2D canvas API,看看能用這些函數(shù)做些什么。

基本線條

上面的例子中展示了繪制矩形是多么簡單。

通過 fillStylestrokeStyle 屬性可以輕松的設(shè)置矩形的填充和線條。顏色值使用方法和 CSS 一樣:十六進(jìn)制數(shù)、rgb()、rgba() 和 hsla()( 若瀏覽器支持,如 Opera
10
和 Firefox 3)。

通過 fillRect 可以繪制帶填充的矩形。使用 strokeRect 可以繪制只有邊框沒有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三個方法的參數(shù)相同:x, y, width, height。前兩個參數(shù)設(shè)定 (x,y) 坐標(biāo),后兩個參數(shù)設(shè)置矩形的高度和寬度。

可以使用 lineWidth 屬性改變線條粗細(xì)。讓我們看看使用了fillRect,
strokeRect clearRect 和其他的例子

context.fillStyle   = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.lineWidth   = 4;

// Draw some rectangles.
context.fillRect  (0,   0, 150, 50);
context.strokeRect(0,  60, 150, 50);
context.clearRect (30, 25,  90, 60);
context.strokeRect(30, 25,  90, 60);

此例子效果圖見圖1.

Example render of fillRect, strokeRect and clearRect.

圖 1: fillRect, strokeRect 和
clearRect效果圖

路徑

通過 canvas 路徑(path)可以繪制任意形狀。可以先繪制輪廓,然后繪制邊框和填充。創(chuàng)建自定義形狀很簡單,使用 beginPath()開始繪制,然后使用直線、曲線和其他圖形繪制你的圖形。繪制完畢后調(diào)用 fillstroke 即可添加填充或者設(shè)置邊框。調(diào)用 closePath() 結(jié)束自定義圖形繪制。

下面是一個繪制三角形的例子

// Set the style properties.
context.fillStyle   = '#00f';
context.strokeStyle = '#f00';
context.lineWidth   = 4;

context.beginPath();
// Start from the top-left point.
context.moveTo(10, 10); // give the (x,y) coordinates
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);

// Done! Now fill the shape, 和 draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

其效果圖見圖2.

Triangle

圖 2: 三角形

另一個較負(fù)責(zé)的例子中使用了直線、曲線和圓弧

插入圖像

drawImage 方法允許在 canvas 中插入其他圖像
( imgcanvas 元素) 。在 Opera 中可以再 canvas 中繪制 SVG 圖形。此方法比較復(fù)雜,可以有3個、5個或9個參數(shù):

  • 3個參數(shù):最基本的 drawImage 使用方法。一個參數(shù)指定圖像位置,另兩個參數(shù)設(shè)置圖像在 canvas中的位置。
  • 5個參數(shù):中級的 drawImage 使用方法,包括上面所述3個參數(shù),加兩個參數(shù)指明插入圖像寬度和高度 (如果你想改變圖像大小)。
  • 9個參數(shù):最復(fù)雜 drawImage 雜使用方法,包含上述5個參數(shù)外,另外4個參數(shù)設(shè)置源圖像中的位置和高度寬度。這些參數(shù)允許你在顯示圖像前動態(tài)裁剪源圖像。

下面是上述三個使用方法的例子:

// Three arguments: the element, destination (x,y) coordinates.
context.drawImage(img_elem, dx, dy);

// Five arguments: the element, destination (x,y) coordinates, and destination 
// width and height (if you want to resize the source image).
context.drawImage(img_elem, dx, dy, dw, dh);

// Nine arguments: the element, source (x,y) coordinates, source width and 
// height (for cropping), destination (x,y) coordinates, and destination width 
// and height (resize).
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

其效果見圖3.

Example rendering of drawImage.

圖 3: drawImage 效果圖。

像素級操作

2D Context API 提供了三個方法用于像素級操作:createImageData, getImageData, 和
putImageData

ImageData對象保存了圖像像素值。每個對象有三個屬性: width, height
datadata 屬性類型為CanvasPixelArray,用于儲存width*height*4個像素值。每一個像素有RGB值和透明度alpha值(其值為 0 至
255,包括alpha在內(nèi)!)。像素的順序從左至右,從上到下,按行存儲。

為了更好的理解其原理,讓我們來看一個例子——繪制紅色矩形

// Create an ImageData object.
var imgd = context.createImageData(50,50);
var pix = imgd.data;

// Loop over each pixel 和 set a transparent red.
for (var i = 0; n = pix.length, i < n; i += 4) {
  pix[i  ] = 255; // red channel
  pix[i+3] = 127; // alpha channel
}

// Draw the ImageData object at the given (x,y) coordinates.
context.putImageData(imgd, 0,0);

注意: 不是所有瀏覽器都實(shí)現(xiàn)了 createImageData。在支持的瀏覽器中,需要通過 getImageData 方法獲取 ImageData 對象。請參考示例代碼

通過 ImageData 可以完成很多功能。如可以實(shí)現(xiàn)圖像濾鏡,或可以實(shí)現(xiàn)數(shù)學(xué)可視化 (如分形和其他特效)。下面特效實(shí)現(xiàn)了簡單的顏色反轉(zhuǎn)濾鏡

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
  pix[i  ] = 255 - pix[i  ]; // red
  pix[i+1] = 255 - pix[i+1]; // green
  pix[i+2] = 255 - pix[i+2]; // blue
  // i+3 is alpha (the fourth element)
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

圖 4 顯示了使用此濾鏡后的 Opera
圖像 (圖 3是原圖)。

Example rendering of the invert color filter.

圖 4: 顏色反轉(zhuǎn)濾鏡

文字

雖然最近的 WebKit 版本和 Firefox 3.1 nightly build 才開始支持 Text API ,為了保證文章完整性我決定仍在這里介紹文字 API 。

context 對象可以設(shè)置以下 text 屬性:

  • font:文字字體,同 CSS
    font-family 屬性
  • textAlign:文字水平對齊方式。可取屬性值: start, end, left,
    right, center。默認(rèn)值:
    start.
  • textBaseline:文字豎直對齊方式。可取屬性值:top, hanging, middle,
    alphabetic, ideographic, bottom。默認(rèn)值:alphabetic.

有兩個方法可以繪制文字: fillTextstrokeText。第一個繪制帶 fillStyle 填充的文字,后者繪制只有 strokeStyle 邊框的文字。兩者的參數(shù)相同:要繪制的文字和文字的位置(x,y) 坐標(biāo)。還有一個可選選項(xiàng)——最大寬度。如果需要的話,瀏覽器會縮減文字以讓它適應(yīng)指定寬度。

文字對齊屬性影響文字與設(shè)置的
(x,y) 坐標(biāo)的相對位置。

下面是一個在 canvas 中繪制"hello world" 文字的例子

context.fillStyle    = '#00f';
context.font         = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText  ('Hello world!', 0, 0);
context.font         = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50);

圖 5 是其效果圖。

Example text render.

圖 5: 文字效果

陰影

目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API 。API 的屬性為:

  • shadowColor:陰影顏色。其值和 CSS 顏色值一致。
  • shadowBlur:設(shè)置陰影模糊程度。此值越大,陰影越模糊。其效果和 Photoshop 的高斯模糊濾鏡相同。
  • shadowOffsetXshadowOffsetY:陰影的 x 和 y 偏移量,單位是像素。

下面是 canvas 陰影的例子

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur    = 4;
context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
context.fillStyle     = '#00f';
context.fillRect(20, 20, 150, 100);

其效果見圖 6。

Example canvas shadow - a blue rectangle with a red shadow.

圖 6: canvas 陰影效果——藍(lán)色矩形,紅色陰影

顏色漸變

除了 CSS 顏色, fillStylestrokeStyle 屬性可以設(shè)置為 CanvasGradient 對象。——通過 CanvasGradient可以為線條和填充使用顏色漸變。

欲創(chuàng)建 CanvasGradient 對象,可以使用兩個方法:createLinearGradientcreateRadialGradient。前者創(chuàng)建線性顏色漸變,后者創(chuàng)建圓形顏色漸變。

創(chuàng)建顏色漸變對象后,可以使用對象的 addColorStop 方法添加顏色中間值。

下面的代碼演示了顏色漸變使用方法:

// You need to provide the source 和 destination (x,y) coordinates 
// for the gradient (from where it starts 和 where it ends).
var gradient1 = context.createLinearGradient(sx, sy, dx, dy);

// Now you can add colors in your gradient.
// The first argument tells the position for the color in your gradient. The 
// accepted value range is from 0 (gradient start) to 1 (gradient end).
// The second argument tells the color you want, using the CSS color format.
gradient1.addColorStop(0,   '#f00'); // red
gradient1.addColorStop(0.5, '#ff0'); // yellow
gradient1.addColorStop(1,   '#00f'); // blue

// For the radial gradient you also need to provide source
// 和 destination circle radius.
// The (x,y) coordinates define the circle center points (start 和 
// destination).
var gradient2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);

// Adding colors to a radial gradient is the same as adding colors to linear 
// gradients.

我也準(zhǔn)備了一個更復(fù)雜的例子,使用了線性顏色漸變、陰影和文字。其效果見圖 7。

Example rendering using a linear gradient.

圖 7: 使用線性顏色漸變的例子

canvas 演示

如果你想知道使用 Canvas可以做些什么,可以參看以下的工程:

小節(jié)

Canvas 是 HTML 5最讓人期待的特性之一,目前已獲得大部分 Web 瀏覽器支持。Canvas 可以幫助創(chuàng)建游戲、增強(qiáng)圖形用戶界面。2D context
API 提供大量圖形繪制功能——我希望通過本文你了解了 canvas 使用,并且你有興趣了解更多!

 

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章主要介紹了有關(guān)HTML5頁面在iPhoneX適配問題,需要的朋友可以參考下
本篇文章主要介紹了html5中canvas圖表實(shí)現(xiàn)柱狀圖的示例,本文使用canvas來實(shí)現(xiàn)一個圖表,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
Adobe公司出品的多媒體處理軟件產(chǎn)品線較多,涵蓋了音視頻編輯、圖像處理、平面設(shè)計、影視后期等領(lǐng)域。這篇文章主要介紹了Adobe Html5 Extension開發(fā)初體驗(yàn)圖文教程,非常不錯,需要的朋
這篇文章主要介紹了基于HTML5的WebGL經(jīng)典3D虛擬機(jī)房漫游動畫,需要的朋友可以參考下
本篇文章主要介紹了canvas 實(shí)現(xiàn) github404動態(tài)效果的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了關(guān)于h5中的fetch方法解讀(小結(jié)),fetch身為H5中的一個新對象,他的誕生,是為了取代ajax的存在而出現(xiàn),有興趣的可以了解一下
主站蜘蛛池模板: 篮球架_乒乓球台_足球门_校园_竞技体育器材_厂家_价格-沧州浩然体育器材有限公司 | 伊卡洛斯软装首页-电动窗帘,别墅窗帘,定制窗帘,江浙沪1000+别墅窗帘案例 | 上海租奔驰_上海租商务车_上海租车网-矢昂汽车服务公司 | 致胜管家软件服务【在线免费体验】| 水篦子|雨篦子|镀锌格栅雨水篦子|不锈钢排水篦子|地下车库水箅子—安平县云航丝网制品厂 | 扒渣机厂家_扒渣机价格_矿用扒渣机_铣挖机_撬毛台车_襄阳永力通扒渣机公司 | 智能化的检漏仪_气密性测试仪_流量测试仪_流阻阻力测试仪_呼吸管快速检漏仪_连接器防水测试仪_车载镜头测试仪_奥图自动化科技 | 北京征地律师,征地拆迁律师,专业拆迁律师,北京拆迁律师,征地纠纷律师,征地诉讼律师,征地拆迁补偿,拆迁律师 - 北京凯诺律师事务所 | 学考网学历中心| ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 网站建设,北京网站建设,北京网站建设公司,网站系统开发,北京网站制作公司,响应式网站,做网站公司,海淀做网站,朝阳做网站,昌平做网站,建站公司 | TwistDx恒温扩增-RAA等温-Jackson抗体-默瑞(上海)生物科技有限公司 | 云阳人才网_云阳招聘网_云阳人才市场_云阳人事人才网_云阳人家招聘网_云阳最新招聘信息 | 菏泽知彼网络科技有限公司 | 耳模扫描仪-定制耳机设计软件-DLP打印机-asiga打印机-fitshape「飞特西普」 | jrs高清nba(无插件)直播-jrs直播低调看直播-jrs直播nba-jrs直播 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | LCD3D打印机|教育|桌面|光固化|FDM3D打印机|3D打印设备-广州造维科技有限公司 | 天助网 - 中小企业全网推广平台_生态整合营销知名服务商_天助网采购优选 | AGV叉车|无人叉车|AGV智能叉车|AGV搬运车-江西丹巴赫机器人股份有限公司 | 定量包装机,颗粒定量包装机,粉剂定量包装机,背封颗粒包装机,定量灌装机-上海铸衡电子科技有限公司 | 菏泽知彼网络科技有限公司| 冷水机-冰水机-冷冻机-冷风机-本森智能装备(深圳)有限公司 | IIS7站长之家-站长工具-爱网站请使用IIS7站长综合查询工具,中国站长【WWW.IIS7.COM】 | 云南外加剂,云南速凝剂,云南外加剂代加工-普洱澜湄新材料科技有限公司 | 智能终端_RTU_dcm_北斗星空自动化科技 | 座椅式升降机_无障碍升降平台_残疾人升降平台-南京明顺机械设备有限公司 | 短信通106短信接口验证码接口群发平台_国际短信接口验证码接口群发平台-速度网络有限公司 | 煤棒机_增碳剂颗粒机_活性炭颗粒机_木炭粉成型机-巩义市老城振华机械厂 | 印刷人才网 印刷、包装、造纸,中国80%的印刷企业人才招聘选印刷人才网! | 烟雾净化器-滤筒除尘器-防爆除尘器-除尘器厂家-东莞执信环保科技有限公司 | 外贸资讯网 - 洞悉全球贸易,把握市场先机 | 丙烷/液氧/液氮气化器,丙烷/液氧/液氮汽化器-无锡舍勒能源科技有限公司 | 自恢复保险丝_贴片保险丝_力特保险丝_Littelfuse_可恢复保险丝供应商-秦晋电子 | 微波萃取合成仪-电热消解器价格-北京安合美诚科学仪器有限公司 | 橡胶电子拉力机-塑料-微电脑电子拉力试验机厂家-江苏天源 | 钛合金标准件-钛合金螺丝-钛管件-钛合金棒-钛合金板-钛合金锻件-宝鸡远航钛业有限公司 | 传动滚筒,改向滚筒-淄博建凯机械科技有限公司| 聚合氯化铝-碱式氯化铝-聚合硫酸铁-聚氯化铝铁生产厂家多少钱一吨-聚丙烯酰胺价格_河南浩博净水材料有限公司 | 合肥风管加工厂-安徽螺旋/不锈钢风管-通风管道加工厂家-安徽风之范 | 电力测功机,电涡流测功机,磁粉制动器,南通远辰曳引机测试台 | 工业胀紧套_万向节联轴器_链条-规格齐全-型号选购-非标订做-厂家批发价格-上海乙谛精密机械有限公司 |