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),有興趣的可以了解一下
主站蜘蛛池模板: 广州活动策划公司-15+年专业大型公关活动策划执行管理经验-睿阳广告 | 玻璃钢型材_拉挤模具_玻璃钢拉挤设备——滑县康百思 | 热熔胶网膜|pes热熔网膜价格|eva热熔胶膜|热熔胶膜|tpu热熔胶膜厂家-苏州惠洋胶粘制品有限公司 | 展厅设计-展馆设计-专业企业展厅展馆设计公司-昆明华文创意 | 二维运动混料机,加热型混料机,干粉混料机-南京腾阳干燥设备厂 | 手机游戏_热门软件app下载_好玩的安卓游戏下载基地-吾爱下载站 | 双舌接地线-PC68数字式高阻计-ZC36|苏海百科 | 智慧消防-消防物联网系统云平台 智能化的检漏仪_气密性测试仪_流量测试仪_流阻阻力测试仪_呼吸管快速检漏仪_连接器防水测试仪_车载镜头测试仪_奥图自动化科技 | 软瓷_柔性面砖_软瓷砖_柔性石材_MCM软瓷厂家_湖北博悦佳软瓷 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 无线遥控更衣吊篮_IC卡更衣吊篮_电动更衣吊篮配件_煤矿更衣吊篮-力得电子 | 温州富欧金属封头-不锈钢封头厂家 | 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 智慧农业|农业物联网|现代农业物联网-托普云农物联网官方网站 | 日本东丽膜_反渗透膜_RO膜价格_超滤膜_纳滤膜-北京东丽阳光官网 日本细胞免疫疗法_肿瘤免疫治疗_NK细胞疗法 - 免疫密码 | 烽火安全网_加密软件、神盾软件官网| 不锈钢列管式冷凝器,换热器厂家-无锡飞尔诺环境工程有限公司 | POS机官网 - 拉卡拉POS机免费办理|官网在线申请入口 | 心肺复苏模拟人|医学模型|急救护理模型|医学教学模型上海康人医学仪器设备有限公司 | 自清洗过滤器_全自动过滤器_全自动反冲洗过滤器_量子过滤器-滑漮滴 | 低气压试验箱_高低温低气压试验箱_低气压实验箱 |林频试验设备品牌 | 儋州在线-儋州招聘找工作、找房子、找对象,儋州综合生活信息门户! | 沧州友城管业有限公司-内外涂塑钢管-大口径螺旋钢管-涂塑螺旋管-保温钢管生产厂家 | 中国品牌门窗网_中国十大门窗品牌_著名门窗品牌 | ge超声波测厚仪-电动涂膜机-电动划格仪-上海洪富 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 尚为传动-专业高精密蜗轮蜗杆,双导程蜗轮蜗杆,蜗轮蜗杆减速机,蜗杆减速机生产厂家 | 硅PU球场、篮球场地面施工「水性、环保、弹性」硅PU材料生产厂家-广东中星体育公司 | 炉门刀边腹板,焦化设备配件,焦化焦炉设备_沧州瑞创机械制造有限公司 | 找培训机构_找学习课程_励普教育| 无尘烘箱_洁净烤箱_真空无氧烤箱_半导体烤箱_电子防潮柜-深圳市怡和兴机电 | 安徽泰科检测科技有限公司【官方网站】 | 石家庄律师_石家庄刑事辩护律师_石家庄取保候审-河北万垚律师事务所 | 防水套管|柔性防水套管|伸缩器|伸缩接头|传力接头-河南伟创管道 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 展厅装修公司|企业展厅设计|展厅制作|展厅搭建—广州展厅装饰公司 | 肉嫩度仪-凝胶测试仪-国产质构仪-气味分析仪-上海保圣实业发展有限公司|总部 | BOE画框屏-触摸一体机-触控查询一体机-触摸屏一体机价格-厂家直销-触发电子 | 单螺旋速冻机-双螺旋-流态化-隧道式-食品速冻机厂家-广州冰泉制冷 | 翅片管换热器「型号全」_厂家-淄博鑫科环保 | 网站优化公司_SEO优化_北京关键词百度快速排名-智恒博网络 | Akribis直线电机_直线模组_力矩电机_直线电机平台|雅科贝思Akribis-杭州摩森机电科技有限公司 |