• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • html5 绘图

    版本:HTML5

    HTML5 中最让人兴奋的特性是 canvas — 那个用来作画的东东。在你的页面中插入 canvas 就像插入其他标记一样平常,但你将需要一些编程 的经验来绘制形状、图表、动画、游戏、图片作品等

    HTML5<canvas>标签用于绘制图像(通过脚本,通常是 JavaScript)。不过,<canvas>元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。getContext()方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

    创建一个画布,一个画布在网页中是一个矩形框,通过<canvas>元素来绘制。默认情况下 元素没有边框和内容。标签通常需要指定一个id属性 (脚本中经常引用),width和height属性定义的画布的大小,使用style属性来添加边框。你可以在HTML页面中使用多个<canvas>元素

    HTML

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    

    JS

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
    

    效果

      

    getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。设置 fillStyle 属性可以是CSS颜色,渐变,或图案。fillStyle默认设置是#000000(黑色)。fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。

    canvas 的历史

    这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的 东西都绘制到一块画布上。

    canvas 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。

    Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 canvas 标记。

    我们甚至可以在 IE 中使用 canvas 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。

    canvas 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进,目前 canvas 已经成为 HTML 5 草案中一个正式的标签。

    canvas 标记和 SVG 以及 VML 之间的差异

    canvas 标记和 SVG 以及 VML 之间的一个重要的不同是,canvas 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。

    这两种方式在功能上是等同的,任何一种都可以用另一种来模拟。从表面上看,它们很不相同,可是,每一种都有强项和弱点。例如,SVG 绘图很容 易编辑,只要从其描述中移除元素就行。

    要从同一图形的一个 canvas 标记中移除元素,往往需要擦掉绘图重新绘制它。

    使用 canvas 标记绘制简单图形

    大多数 Canvas 绘图 API 都没有定义在 canvas 元素本身上,而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

    Canvas API 也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用 beginPath() 和 arc() 方法。

    一旦定义了路径,其他的方法,如 fill(),都是对此路径操作。绘图环境的各种属性,比如 fillStyle,说明了这些操作如何使用。

    浏览器支持

    Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签的属性及方法。
    注意:Internet Explorer 8 及更早的IE版本不支持 <canvas> 元素。

    canvas API

    方法 / 属性 使用方法 描述
    getContext() var canvas =
    document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    获取绘制环境
    返回一个用于在画布上绘图的环境。
    save() ctx.save(); 绘制状态
    保存路径
    restore() ctx.restore(); 绘制状态
    恢复路径
    scale() ctx.scale(x, y);
    //x轴缩放比例|y轴缩放比例
    转换
    缩放
    rotate() ctx.rotage(radian);
    //radian 弧度=角度*Math.PI/180
    转换
    旋转角度
    translate() ctx.translate(x, y);
    //x轴的位移|Y轴的位移
    转换
    偏移
    transform() ctx.transform(a, b, c, d, e, f); 转换
    变换
    setTransform() ctx.setTransform(a, b, c, d, e, f); 转换
    设置变换
    globalAlpha ctx.globalAlpha = 0.8; 转换
    透明度
    globalCompositeOperation ctx.globalCompositeOperation = ""; 转换
    透明度
    fillStyle ctx.fillStyle = "#ff0000"; 颜色和边框
    设置绘图的背景颜色
    strokeStyle ctx.strokeStyle = "blue"; 颜色和边框
    在绘制的图形上添加边框颜色
    addColorStop() ctx.addColorStop(offset, color)
    //offset 位置|color 颜色值
    颜色和边框
    在绘制的图形上添加边框颜色
    createLinearGradient() ctx.createLinearGradient(x,y,w,h);
    //x轴位置|y轴位置|渐变宽度|渐变高度
    颜色和边框
    创建一个渐变
    createRadialGradient() ctx. createRadialGradient
    (x0, y0, r0, x1, y1, r1);
    颜色和边框
    在绘制的图形上添加边框颜色
    createPattern() ctx.createPattern
    (img, repeatition);
    //img 图片对象
    //repeatition 平铺方式
    颜色和边框
    在绘制的图形上添加边框颜色
    lineWidth ctx.lineWidth = 10; 边界
    设置绘制的图形边框
    lineJoin ctx.lineJoin = "round";
    //3种格式miter|round|bevel
    //默认|圆角|斜角
    边界
    设置绘制的图形的辩解样式
    lineCap ctx.lineCap = "round";
    //3种格式 butt|round|square
    //默认|圆角|高度多出线宽的一半
    边界
    设置绘制的图形的辩解样式
    miterLimit ctx.miterLimit = ""; 边界
    边框斜切限制
    shadowColor ctx.shadowColor = "red"; 投影
    投影颜色
    shadowOffsetX ctx.shadowOffsetX = 10; 投影
    投影的水平位移
    shadowOffsetY ctx.shadowOffsetY = 10; 投影
    投影的垂直位移
    shadowBlur ctx.shadowBlur = 10; 投影
    投影的模糊大小
    fillRect() ctx.fillRect(x,y,w,h); 绘制矩形
    在画布上填充黑色背景
    strokeRect() ctx.strokeRect(x,y,w,h); 绘制矩形
    在画布上绘制一个带边框的矩形
    clearRect() ctx.clearRect(x,y,w,h); 绘制矩形
    清除指定范围内的内容
    beginPath() function draw(){
    beginPath();
    closePath();
    }
    绘制路径
    开始绘制一个新的路径,避免与后面绘制的路径重叠,在填充或者话边框的时候就会出现问题。 在绘制好路径之后用closePath() 来关闭路径;如果在填充路径时没有关闭,那么context就会自动调用closePath关闭路径。
    closePath() 代码同上 绘制路径
    关闭路径,如果不设置最后一个点,则默认以第一个点结束。
    moveTo() ctx.moveTo(120, 120);//x, y 绘制路径
    移动到绘制的新目标点,设置一个新的点
    lineTo() ctx.lineTo(220, 320);//x, y 绘制路径
    新的目标点
    quadraticCurveTo() ctx.quadraticCurveTo
    (cpx, cpy, x, y);
    //贝赛尔曲线 控制点|坐标点
    绘制路径
    新的目标点
    bezierCurveTo() ctx. bezierCurveTo
    (cp1x, cp1y, cp2x, cp2y, x, y);
    //贝赛尔曲线 控制点|控制点|坐标点
    绘制路径
    新的目标点
    arc() ctx.arc(x, y, r, s, e, d);
    //x,y,半径,起始弧度,结束弧度,旋转方向
    //旋转方向:false[顺时针],true[逆时针]
    绘制路径
    画一个圆
    arcTo() ctx.arc(x1, y1, x2, y2, r);
    //第一组坐标|第二组坐标|半径
    绘制路径
    画一个圆
    rect() ctx.rect();
    //x,y,w,h
    绘制路径
    绘制一个矩形
    fill() ctx.fill();
    //填充,默认黑色
    绘制路径
    把lineTO()设置的点区域用默认颜色填充成一个图形
    stroke() ctx.stroke();
    //画线,默认黑色
    绘制路径
    把lineTO()设置的点连接起来
    clip() ctx.clip(); 绘制路径
    isPointInPath() ctx.isPointInPath(); 绘制路径
    drawFocusRing() ctx.drawFocusRing
    (ele, canDrawCustom);
    集中管理
    setCaretSelectionRect() ctx.setCaretSelectionRect
    (ele, x, y, w, h);
    插入符和选择器管理
    caretBlinkRate() ctx.caretBlinkRate() 插入符和选择器管理
    font ctx.font="" 文本
    设置字体类型
    textAlign = "" ctx.textAlign = ""
    //start, end, left, right, center
    //def:start
    文本
    文本对齐方式
    textBaseline ctx.textBaseline=""
    //def:alphabetic
    文本
    fillText() ctx.fillText
    (text, x, y[, maxWidth ])
    文本
    设置填充的文本
    strokeText() ctx.strokeText
    (text, x, y[, maxWidth ])
    文本
    measureText() var metrics =
    ctx.measureText(text);
    metrics . width
    文本
    drawImage() drawImage(image,dx,dy)
    drawImage(image,dx,dy,dw,dh)
    drawImage(image,sx,sy,sw,sh,
    dx,dy,dw,dh)
    图片操作
    在画布上载入一张图片
    createImageData() createImageData(sw,sh) 图片操作
    createImageData() createImageData(imageData) 图片操作
    getImageData() var imageData =
    createImageData(sx,sy,sw,sh)
    imageData.width
    imageData.height
    imageData.data
    图片操作
    putImageData() putImageData(imageData,dx,dy[,
    dirtyX,dirtyY,dirtyWidth,
    dirtyHeight])
    图片操作
    绘制模型

    Canvas - 路径

    在Canvas上画线,我们将使用以下两种方法:

    • moveTo(x,y) 定义线条开始坐标
    • lineTo(x,y) 定义线条结束坐标

    绘制线条我们必须使用到 "ink" 的方法,就像stroke()。

    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(0,0);
        ctx.lineTo(200,100);
        ctx.stroke();
    </script>
    

    定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条

    Canvas - 文本

    使用 canvas 绘制文本,重要的属性和方法如下:

    • font - 定义字体
    • fillText(text,x,y) - 在 canvas 上绘制实心的文本
    • strokeText(text,x,y) - 在 canvas 上绘制空心的文本

    使用 fillText():

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.fillText("Hello World",10,50);
    

    使用 "Arial" 字体在画布上绘制一个高 30px 的文字(实心)

    Canvas - 渐变

    渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

    以下有两种不同的方式来设置Canvas渐变:

    • createLinearGradient(x,y,x1,y1) - 创建线条渐变
    • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
    • addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1

    使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线。

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // Create gradient
    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // Fill with gradient
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
    

    创建了一个线性渐变,使用渐变填充矩形

    Canvas - 图像

    把一幅图像放置到画布上, 使用drawImage(image,x,y)方法

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);
    

    把一幅图像放置到了画布上

    SVG 与 Canvas两者间的区别

    • SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。
    • SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
    • Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

    上篇:html5 视频

    下篇:html5 拖放