网站首页 » 前端开发 » HTML5 » HTML5 Canvas 教程
上一篇:
下一篇:

HTML5 Canvas 教程

HTML5 中的 Canvas 可以通过 JavaScript 脚本来绘制一些图形。Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px),所有主流浏览器的新版本都支持 Canvas 。

Canvas 基础

下面是 Canvas 的基本用法。

基本套路

HTML
<canvas id="tutorial" width="150" height="150">你的浏览器过旧,请升级浏览器或者安装其它现代浏览器!</canvas>

<canvas> 标签只有两个属性(width 和 height),并且这两个属性都是可选的,如果不设置宽高,canvas会初始化宽度为300像素和高度为150像素。可以像使用其它元素一样给 Canvas 标签添加 ID 或者 class 。用于样式设置及 JavaScript 脚本。像 <audio>,<video>,或者 <picture>元素一样,你可以很轻易地定义一些替代内容。如果浏览器不支持 Canvas 标签,那么就会把 Canvas 标签中的内容显示到页面中。

浏览器支持性检测

看这里
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

使用canvas 的第一步就是在页面中创建或者获取 canvas 元素,然后进行相关操作(绘图)。

Canvas 形状绘制

矩形

  • rect(x, y, width, height)
    绘制一个左上角坐标为(x,y),宽高为width以及height的矩形。该方法执行的时候,moveTo()方法自动设置坐标参数(0,0)。也就是说,当前笔触自动重置会默认坐标。
  • fillRect(x, y, width, height)
    绘制一个填充的矩形
  • strokeRect(x, y, width, height)
    绘制一个矩形的边框
  • clearRect(x, y, width, height)
    清除指定矩形区域,让清除部分完全透明。

路径

  • beginPath()
    新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。
  • closePath()
    闭合路径之后图形绘制命令又重新指向到上下文中。
  • stroke()
    通过线条来绘制图形轮廓。
  • fill()
    通过填充路径的内容区域生成实心的图形。
  • moveTo(x, y)
    将笔触移动到指定的坐标 x 以及y上。
  • lineTo(x, y)
    绘制一条从当前位置到指定 x 以及 y 位置的直线。

圆弧

  • arc(x, y, radius, startAngle, endAngle, anticlockwise)
    画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到endAngle结束,按照anticlockwise给定的方向(默认为顺时针)来生成。arc方法,该方法有六个参数:x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时,是逆时针方向,否则顺时针方向。arc()函数中的角度单位是弧度,不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
  • arcTo(x1, y1, x2, y2, radius)
    根据给定的控制点和半径画一段圆弧,再以直线连接两个控制点。

贝塞尔曲线

  • quadraticCurveTo(cp1x, cp1y, x, y)
    绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点。
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
    绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。

颜色

  • fillStyle = color
    设置图形的填充颜色,可以配合 rgba() 使用。如:ctx.fillStyle = ‘rgba(255,255,255,’+(i+1)/10+’)’;
  • strokeStyle = color
    设置图形轮廓的颜色。color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。

    送温暖

    一旦您设置了 strokeStyle 或者 fillStyle 的值,那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色,你需要重新设置 fillStyle 或 strokeStyle 的值。

  • globalAlpha = transparencyValue
    这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。

渐变

  • createLinearGradient(x1, y1, x2, y2)
    createLinearGradient 方法接受 4 个参数,表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
  • createRadialGradient(x1, y1, r1, x2, y2, r2)
    createRadialGradient 方法接受 6 个参数,前三个定义一个以 (x1,y1) 为原点,半径为 r1 的圆,后三个参数则定义另一个以 (x2,y2) 为原点,半径为 r2 的圆。
  • gradient.addColorStop(position, color)
    addColorStop 方法接受 2 个参数,position 参数必须是一个 0.0 与 1.0 之间的数值,表示渐变中颜色所在的相对位置。例如,0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值(如 #FFF, rgba(0,0,0,1),等等)。

阴影

  • shadowOffsetX = float
    shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0。
  • shadowOffsetY = float
    shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0。
  • shadowBlur = float
    shadowBlur 用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为 0。
  • shadowColor = color
    shadowColor 是标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色。

文本

  • fillText(text, x, y [, maxWidth])
    在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的
  • strokeText(text, x, y [, maxWidth])
    在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的
  • font = value
    当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
  • textAlign = value
    文本对齐选项. 可选的值包括:start, end, left, right or center. 默认值是 start。
  • textBaseline = value
    基线对齐选项. 可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
  • direction = value
    文本方向。可能的值包括:ltr, rtl, inherit。默认值是 inherit。
  • measureText()
    将返回一个 TextMetrics对象的宽度、所在像素,这些体现文本特性的属性。

图案样式

  • createPattern(image, type)
    该方法接受两个参数。Image 可以是一个 Image 对象的引用,或者另一个 canvas 对象。Type 必须是下面的字符串值之一:repeat,repeat-x,repeat-y 和 no-repeat。

图片绘制

  • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
    其中 image 是 image 或者 canvas 对象,sx 和 sy 是其在裁切图片的起始坐标,sWidth  和 sHeight 为需要在原图上裁剪的宽高。即前4个是定义源图像的切片位置和大小,后4个则是定义切片的目标( canvas 里的)显示位置和大小。

路径样式

  • lineWidth = value
    设置线条宽度。这个属性设置当前绘线的粗细。属性值必须为正数。默认值是1.0。
  • lineCap = type
    设置线条末端样式。
  • lineJoin = type
    设定线条与线条间接合处的样式。
  • miterLimit = value
    限制当两条线相交时交接处最大长度;所谓交接处长度(斜接长度)是指线条交接处内角顶点到外角顶点的长度。
  • getLineDash()
    返回一个包含当前虚线样式,长度为非负偶数的数组。
  • setLineDash(segments)
    设置当前虚线样式。
  • lineDashOffset = value
    设置虚线样式的起始偏移量。

保存恢复状态

  • save()
    保存Canvas 状态。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。
  • restore()
    恢复Canvas 状态。

一个绘画状态包括:

  • 当前应用的变形(即移动,旋转和缩放)
  • strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
  • 当前的裁切路径(clipping path)

变形

  • translate(x, y)
    translate 方法接受两个参数。x 是左右偏移量,y 是上下偏移量。
  • rotate(angle)
    这个方法只接受一个参数:旋转的角度(angle),它是顺时针方向的,以弧度为单位的值。
  • scale(x, y)
    scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值。值比 1.0 小表示缩小,比 1.0 大则表示放大,值为 1.0 时什么效果都没有。
  • transform(m11, m12, m21, m22, dx, dy)
    这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵。m11:水平方向的缩放、m12:水平方向的偏移、m21:竖直方向的偏移、m22:竖直方向的缩放、dx:水平方向的移动、dy:竖直方向的移动

 

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/html5-canvas/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END