HTML5 canvas 基础英语的语法

日期:2021-01-20 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

HTML 5 canvas —— 基础英语的语法

简述

5 标准引进了许多新特点,在其中最让人希望的之1便是 元素。HTML 5 出示了根据 JavaScript 绘图图型的方式,此方式应用简易但作用强劲。每个 元素都有1个"左右文( context )" (想像成制图板上的1页),在这其中能够绘图随意图型。访问器适用好几个 canvas 左右文,并根据不一样的 出示图型绘图作用。 5 标准引进了许多新特点,在其中最让人希望的之1便是 元素。 5 出示了根据 JavaScript 绘图图型的方式,此方式应用简易但作用强劲。每个 元素都有1个"左右文( context )" (想像成制图板上的1页),在这其中能够绘图随意图型。访问器适用好几个 canvas 左右文,并根据不一样的 出示图型绘图作用。

绝大多数的访问器都适用 2D canvas 左右文——包含 Opera, Firefox, Konqueror 和 Safari。并且一些版本号的 Opera 还适用 三d canvas ,Firefox 还可以根据软件方式适用 三d canvas :

  • 免费下载适用 三d canvas, HTML video 和 File I/O 的 Opera
  • 有关 Opera 三d canvas 左右文的文章内容
  • 有关 Firefox 三d canvas
    左右文的文章内容

本文详细介绍 2D canvas
基本和怎样应用基础 canvas 涵数,如线条、样子、图象和文本等。以便了解此文章内容,你最好是掌握 JavaScript 基本专业知识。

能够点一下此处大批量免费下载本文案例编码

canvas 基本

建立 canvas 的方式很简易,只必须在 HTML 网页页面中加上 <canvas> 元素:

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

以便能在 JavaScript 中引入元素,最好是给元素设定 ID ;也必须给 canvas 设置高宽比和宽度。

建立好了画布后,让大家来提前准备画笔。要在画布中绘图图型必须应用 JavaScript 。最先根据 getElementById 涵数寻找 canvas
元素,随后原始化左右文。以后可使用左右文 API 绘图各种各样图型。下面的脚本制作在 canvas 中绘图1个矩形框 (点一下此处查询实际效果):

// 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

详细介绍了怎样建立 canvas 后,让大家看来看 2D canvas API,看看能用这些涵数做些甚么。

基础线条

上面的事例中展现了绘图矩形框是多么的简易。

根据 fillStylestrokeStyle 特性能够轻轻松松的设定矩形框的填充和线条。色调值应用方式和 106进制数、()、() 和 ()( 若访问器适用,如 Opera10 和 Firefox 3)。106进制数、()、() 和 ()( 若访问器适用,如 Opera10 和 Firefox 3)。

根据 fillRect 能够绘图带填充的矩形框。应用 strokeRect 能够绘图仅有边框沒有填充的矩形框。假如想消除一部分 canvas 可使用 clearRect。上述3个方式的主要参数同样:x, y, width, height。前两个主要参数设置 (x,y) 座标,后两个主要参数设定矩形框的高宽比和宽度。

可使用 lineWidth 特性更改线条粗细。让大家看看应用了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.


图 1: fillRect, strokeRect 和
clearRect实际效果图

相对路径

根据 canvas 相对路径(path)能够绘图随意样子。能够先绘图轮廊,随后绘图边框和填充。建立自定样子很简易,应用 beginPath()刚开始绘图,随后应用平行线、曲线图和别的图型绘图你的图型。绘图结束后启用 fillstroke 便可加上填充或设定边框。启用 closePath() 完毕自定图型绘图。

下面是1个绘图3角形的事例:

// 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.


图 2: 3角形

另外一个较负责的事例中应用了平行线、曲线图和圆弧。

插进图象

drawImage 方式容许在 canvas 中插进别的图象
( imgcanvas 元素) 。在 Opera 中能够再 canvas 中绘图 SVG 图型。此方式较为繁杂,能够有3个、5个或9个主要参数:

  • 3个主要参数:最基础的 drawImage 应用方式。1个主要参数特定图象部位,另两个主要参数设定图象在 canvas中的部位。
  • 5个主要参数:初级的 drawImage 应用方式,包含上面所述3个主要参数,加两个主要参数指明插进图象宽度和高宽比 (假如你想更改图象尺寸)。
  • 9个主要参数:最繁杂 drawImage 杂应用方式,包括上述5个主要参数外,此外4个主要参数设定源图象中的部位和高宽比宽度。这些主要参数容许你在显示信息图象前动态性剪裁源图象。

下面是上述3个应用方式的事例:

// 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.


图 3: drawImage 实际效果图。

像素级实际操作

2D Context API 出示了3个方式用于像素级实际操作:createImageData, getImageData, 和
putImageData

ImageData目标储存了图象像素值。每一个目标有3个特性: width, height
datadata 特性种类为CanvasPixelArray,用于存储width*height*4个像素值。每个像素有RGB值和全透明度alpha值(其值为 0 至
255,包含alpha在内!)。像素的次序从左至右,从上到下,按行储存。

以便更好的了解其基本原理,让大家看来1个事例——绘图鲜红色矩形框

// 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);

留意: 并不是全部访问器都完成了 createImageData。在适用的访问器中,必须根据 getImageData 方式获得 ImageData 目标。请参照示例编码。

根据 ImageData 能够进行许多作用。如能够完成图象滤镜,或能够完成数学课可视性化 (如博采和别的殊效)。下面殊效完成了简易的色调翻转滤镜:

// 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是原图)。


图 4: 色调翻转滤镜

文本

尽管近期的 WebKit 版本号和 Firefox 3.1 nightly build 才刚开始适用 Text API ,以便确保文章内容详细性我决策仍在这里详细介绍文本 API 。

context 目标能够设定下列 text 特性:

  • font:文本字体样式,同特性 特性
  • textAlign:文本水平对齐方法。可取特性值: start, end, left,
    right, center。默认设置值:
    start.
  • textBaseline:文本垂直对齐方法。可取特性值:top, hanging, middle,
    alphabetic, ideographic, bottom。默认设置值:alphabetic.

有两个方式能够绘图文本: fillTextstrokeText。第1个绘图带 fillStyle 填充的文本,后者绘图仅有 strokeStyle 边框的文本。二者的主要参数同样:要绘图的文本和文本的部位(x,y) 座标。也有1个可选选项——最大宽度。假如必须的话,访问器会缩减文本以让它融入特定宽度。

文本对齐特性危害文本与设定的
(x,y) 座标的相对性部位。

下面是1个在 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 是其实际效果图。


图 5: 文本实际效果

黑影

现阶段仅有 Konqueror 和 Firefox 3.1 nightly build 适用 Shadows API 。API 的特性为:

  • shadowColor:黑影色调。其值和 CSS 色调值1致。
  • shadowBlur:设定黑影模糊不清水平。此值越大,黑影越模糊不清。其实际效果和 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。


图 6: canvas 黑影实际效果——蓝色矩形框,鲜红色黑影

色调渐变色

除 CSS 色调, fillStylestrokeStyle 特性能够设定为 CanvasGradient 目标。——根据 CanvasGradient能够为线条和填充应用色调渐变色。

欲建立 CanvasGradient 目标,可使用两个方式:createLinearGradientcreateRadialGradient。前者建立线形色调渐变色,后者建立圆形色调渐变色。

建立色调渐变色目标后,可使用目标的 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.

我也提前准备了1个更繁杂的事例,应用了线形色调渐变色、黑影和文本。其实际效果见图 7。


图 7: 应用线形色调渐变色的事例

canvas 演试

假如你想了解应用 Canvas能够做些甚么,能够参看下列的工程项目:

  • Opera Widget:
    • SimAquarium
    • Artist's
      Sketchbook
    • Spirograph
  • 线上工程项目和演试
    • Newton polynomial
    • Canvascape - "三d Walker"
    • Paint.Web - painting
      demo, open-source
    • Star-field
      flight
    • Interactive blob

小标题

Canvas 是 HTML 5最使人希望的特点之1,现阶段已得到绝大多数 Web 访问器适用。Canvas 能够协助建立手机游戏、提高图型客户页面。2D context
API 出示很多图型绘图作用——我期待根据本文你掌握了 canvas 应用,而且你有兴趣爱好掌握更多!

上一篇:要想做好微营销推广?看看这个吧 返回下一篇:没有了