HTML 5 Canvas 简介

本贴最后更新于 2102 天前,其中的信息可能已经时移世易

canvas 简介

  • 是 HTML5 提供的一种新标签
  • 是一个矩形区域的画布,可以用 JavaScript 在上面绘画,控制其每一个像素,本身不具备绘图功能。
  • 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

使用:

<canvas width="600" height="600">你的浏览器不支持canvas,请升级浏览器</canvas>

canvas 用途

  • 游戏:canvas 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧,canvas 游戏在流畅度和跨平台方面更牛。
  • 可视化数据.数据图表话,比如:百度的 echart
  • banner 广告:Flash 曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5 技术能够在 banner 广告上发挥巨大作用,用 Canvas 实现动态的广告效果再合适不过。

canvas 标签语法和属性

  1. 可以设置 width 和 height 属性,但是属性值单位必须是 px,否则忽略,默认 300*150px
  2. 不要用 CSS 控制它的宽和高,会造成图片拉伸,
  3. js 重新设置 canvas 标签的宽高属性会让画布擦除所有的内容。
  4. 可以给 canvas 画布设置背景色

canvas 坐标系

canvas 坐标系,从最左上角 0,0 开始。x 向右增大, y 向下增大
canvas 坐标系

Canvas API

绘图上下文 context

上下文:工具包,是所有的绘制操作 api 的入口或者集合

  1. canvas 自身无法绘制任何内容。Canvas 的绘图是使用 JavaScript 操作的。
  2. context 对象就是 JavaScript 操作 Canvas 的接口
  3. 使用 getContext('2d')来获取 2D 绘图上下文。
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');  //注意:2d小写, 3d:webgl

绘制图形

属性

  • lineWidth 设置线宽
  • strokeStyle 设置描边样式(默认黑色)
  • fillStyle 设置填充样式(默认黑色)

方法

  • moveTo(x,y) 设置绘制路径的起点(移动画笔位置)

  • lineTo(x,y) 画线

  • closePath() 闭合路径,必须闭合路径才能成功填充

  • beginPath() 开启一个新状态,基于之前的状态开启新的状态,新的状态会保持之前的设置

    ctx.beginPath();
    //开启新的状态后,当设置新的值时,只会作用于当前状态,不会影响之前的状态
    ctx.lindeWidth = 2;
    ctx.strokeStyle = '#ddd';
    
  • rect(x,y,width,height) 绘制矩形路径
    x, y 是矩形左上角坐标, width 和 height 都是以像素计(下同)

PS: rect 方法只是规划了矩形的路径,并没有填充和描边

  • strokeRect(x,y,width,height) 绘制描边矩形
  • fillRect(x,y,width,height) 绘制填充矩形
  • stroke() 描边
  • fill() 填充,该方法会自动闭合路径
  • clearRect(x,y,width,height) 清除矩形区域,

PS:重新设置 canvas 的宽/高也能达到清空的效果

  • arc(x,y,radius,startAngle,endAngle,counterclockwise) 画圆弧/画圆
    • x,y:圆心坐标。
    • radius:半径大小。
    • startAngle:绘制开始的角度(x 轴为 0 度)。
    • endAngel:结束的角度,注意是弧度。
    • counterclockwise:是否是逆时针。true 是逆时针,false:顺时针
弧度和角度的转换公式: rad = deg*Math.PI/180;
在Math提供的方法中sin、cos等都使用的弧度

**绘图步骤(5 步):

    1、获得画布
    var canvas  = document.getElementById( 'cavsElem' );

    2、获得canvas上下文
    var ctx = canvas.getContext( '2d' );

    3、绘制路径
    //设置绘制起点(移动画笔位置)
    ctx.moveTo(100,100);

    ctx.lineTo(200,100);
    ctx.lineTo(100,200);

    4、设置样式
    //设置线宽
    ctx.lineWidth = 4;

    //设置描边样式(默认黑色)
    ctx.strokeStyle = 'red';

    //设置填充样式(默认黑色)
    ctx.fillStyle = '#f60';

    5、描边/填充
    ctx.stroke();
    ctx.fill();

    PS:fill()方法会自动闭合路径

绘制字体(了解)

属性

  • font 设置或返回文本内容的当前字体属性,语法与 CSS 相同

  • textAlign 设置或返回文本内容的当前对齐方式

    • start(默认): 文本在指定的位置开始。
    • end : 文本在指定的位置结束。
    • center: 文本的中心被放置在指定的位置。
    • left : 文本左对齐。
    • right : 文本右对齐。

    textAlign 示意图

  • textBaseline 设置或返回在绘制文本时使用的当前文本基线

    • alphabetic : 默认。文本基线是普通的字母基线。
    • top : 文本基线是 em 方框的顶端。。
    • hanging : 文本基线是悬挂基线。
    • middle : 文本基线是 em 方框的正中。
    • ideographic: 文本基线是 em 基线。
    • bottom : 文本基线是 em 方框的底端

    textBaseline 示意图

方法

  • fillText(text,x,y) 填充字体
  • strokeText(text,x,y) 描边字体
  • measureText(text,x,y) 检测字体宽度,返回包含指定文本宽度的对象
    • text:文本
    • x,y:绘制文字起始坐标

绘制图片

  • 基本绘制图片的方式
    ctx.drawImage(img,x,y);
    参数:
    x,y 绘制图片左上角的坐标,
    img是绘制图片的dom对象。
  • 在画布上绘制图像,并规定图像的宽度和高度
    ctx.drawImage(img,x,y,width,height);   
    参数:
    width 绘制图片的宽度,
    height:绘制图片的高度

    如果指定宽高,最好成比例,不然图片会被拉伸
    等比公式: height = 原高度*width/原宽度;
  • 图片裁剪,并把裁剪完成后的那部分图片绘制到画布上
    ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    参数:
    sx,sy 裁剪的左上角坐标,
    swidth:裁剪图片的高度。
    sheight:裁剪的高度

设置阴影(了解)

  • shadowColor : 设置或返回用于阴影的颜色
  • shadowBlur : 设置或返回用于阴影的模糊级别,数值越高,模糊程度越大 (默认为 0,不模糊)
  • shadowOffsetX: 设置或返回阴影距形状的水平距离
  • shadowOffsetY: 设置或返回阴影距形状的垂直距离

示例:

    ctx.fillStyle = '#fc0';
    ctx.shadowColor = '#333';
    ctx.shadowBlur = 50;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.fillRect(100,100,100,100);

创建渐变样式(了解)

线性渐变

线性渐变是一个对象

  • 语法:ctx.createLinearGradient(x0,y0,x1,y1);
    参数:x0,y0 起始坐标,x1,y1 结束坐标

  • addColorStop(stop,color)

    • stop:介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置
    • color:颜色值
    //创建线性渐变的对象,
    var grd=ctx.createLinearGradient(0,0,170,0);

    //添加一个渐变颜色,
    //参数1:0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
    //参数2:具体颜色
    grd.addColorStop(0,"black");

    //添加一个渐变颜色
    grd.addColorStop(1,"white");

    //关键点,把渐变设置到 填充的样式
    ctx.fillStyle =grd;

径向渐变

  • ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);
    • x0: 渐变的开始圆的 x 坐标
    • y0: 渐变的开始圆的 y 坐标
    • r0: 开始圆的半径
    • x1: 渐变的结束圆的 x 坐标
    • y1: 渐变的结束圆的 y 坐标
    • r1: 结束圆的半径
    var rlg = ctx.createRadialGradient(300,300,10,300,300,200);

    //添加一个渐变颜色
    rlg.addColorStop(0, '#ccc');
    rlg.addColorStop(.4, '#efefef');
    rlg.addColorStop(1, '#fff');

    //设置 填充样式为延续渐变的样式
    ctx.fillStyle = rlg;
    ctx.fillRect(100, 100, 500, 500);

绘制背景图(了解)

ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素了解

  • 参数一:设置平铺背景的图片的 DOM 节点,
  • 参数二:背景平铺的方式。
    • image : 规定要使用的图片、画布或视频元素。
    • repeat : 默认。该模式在水平和垂直方向重复。
    • repeat-x : 该模式只在水平方向重复。
    • repeat-y : 该模式只在垂直方向重复。
    • no-repeat: 该模式只显示一次(不重复)。
    var ctx=c.getContext("2d");
    var img=document.getElementById("lamp");
    var pat=ctx.createPattern(img,"repeat");
    ctx.rect(0,0,150,100);
    ctx.fillStyle=pat;//  把背景图设置给填充的样式
    ctx.fill();

画布变换

注意:画布变换仅仅是改变画布状态,不会影响之前画布上的内容

  • 缩放
    scale(scaleWidth,scaleHeight) 方法缩放当前绘图,参数为 0~1 的值

  • 位移画布
    translate(x,y) 方法重新映射画布上的 (0,0) 位置

  • 旋转
    rotate(angle) 方法旋转当前的绘图,注意参数是弧度

绘制环境保存和还原

  • ctx.save() 保存当前环境的状态
    可以把当前绘制环境 context 保存到缓存中。

  • ctx.restore() 返回之前保存过的路径状态和属性
    获取最近通过 save()方法缓存的 context

保存 base64 编码图片

  • toDataURL(type, encoderOptions);
    • type,设置输出的类型,比如 image/png image/jpeg 等
    • encoderOptions:0-1 之间的数字,用于标识输出图片的品质

PS:必须在服务器环境下使用

    var canvas = document.getElementById("canvas");
    var dataURL = canvas.toDataURL();
    var img = document.querySelector("img");
    img.src = canvas.toDataURL("image/png");//将画布的内容赋值给图片的src属性

贝塞尔曲线(了解)

二次方曲线

quadraticCurveTo(cpx,cpy,x,y)

  • cpx: 贝塞尔控制点的 x 坐标
  • cpy: 贝塞尔控制点的 y 坐标
  • x : 结束点的 x 坐标
  • y : 结束点的 y 坐标
    二次方曲线示意图

贝塞尔曲线

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

提示:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点

  • cp1x: 第一个贝塞尔控制点的 x 坐标
  • cp1y: 第一个贝塞尔控制点的 y 坐标
  • cp2x: 第二个贝塞尔控制点的 x 坐标
  • cp2y: 第二个贝塞尔控制点的 y 坐标
  • x: 结束点的 x 坐标
  • y: 结束点的 y 坐标
    贝塞尔曲线示意图

Canvas 应用

  • Echarts
  • Highcharts

原文版权所有 @Lee

  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖 • 1 关注
  • Canvas
    13 引用 • 82 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...