文档章节

Canvas 基础详解

 草帽行者
发布于 2016/03/24 12:14
字数 1816
阅读 40
收藏 0

CANVAS 基础详解

canvas 简介

<canvas id="canvas" />

W3C

http://www.w3.org/TR/2dcontext/

WHATWG

https://html.spec.whatwg.org/

###兼容性问题

  1. 判断当前浏览器是否支持canvas标签

输入图片说明

  1. IE6、7、8等浏览器的兼容性问题

在程序中加载explorecanvas https://code.google.com/p/explorercanvas


注意的问题

  1. 不建议使用css的方式指定canvas的width和height,因为:css指定的是canvas这块画布的大小,除此之外,canvas还包括显示其内里的图片的分辨率的大小,这样做会一并指定;

文本

文本宽度

var textWidth = context.measureText("得到我的宽度").width;


图形变换

translate

位移变换

context.translate(x轴方向的偏移量, y周方向的偏移量);

  • 注意 - 使用图形变换后,会将屏幕的参考点移到图形变换的偏移量处,解决的方式:
    • 方案1: 再变换完后,调用一下反向偏移,使其恢复,即:context.translate(x轴方向的偏移量, y周方向的偏移量);
    • 方案2(推荐): 再变换前调用context.save(),对所有的绘制状态进行保存,绘制完后调用context.restore(),使其恢复

scale

缩放

context.scale(x轴缩放倍数, y轴缩放倍数);

  • 注意 - 使用scale后,会同步缩放lineWidth、图形开始坐标等属性,解决方式:不对其进行相关属性的设置

rotate

旋转

context.rotate(旋转的弧度);

transform

图形变换矩阵

context.transform(水平缩放1, 水平倾斜0, 垂直倾斜0, 垂直缩放1, 水平位移0, 垂直位移0)

setTransform

重新设置对应的图形变换矩阵

context.setTransform(水平缩放1, 水平倾斜0, 垂直倾斜0, 垂直缩放1, 水平位移0, 垂直位移0)


渐变

  • 使用步骤

    1. 创建一个渐变的对象(以线性渐变为例)

    var gradient = context.createLinearGradient(渐变开始的x轴坐标, 渐变开始的y轴坐标, 渐变结束的x轴坐标, 渐变结束的y轴坐标);

    ** var gradient = context.createLinearGradient(0, 0, 0, canvas.height); **

    1. 设置渐变填充的样式

    linearGradient.addColorStop(渐变中开始与结束的位置(0~1), 结束位置的颜色);

    ** gradient.addColorStop(0, "black"); gradient.addColorStop(1, "#035"); **

    1. 使用

    context.fillStyle = 渐变对象;

    ** context.fillStyle = gradient; **

linearGradient

线性渐变

var linearGradient = context.createLinearGradient(渐变开始的x轴坐标, 渐变开始的y轴坐标, 渐变结束的x轴坐标, 渐变结束的y轴坐标);

  • eg: var linearGradient = context.createLinearGradient(0, 0, 0, canvas.height);

radialGradient

放射状/圆形 渐变

var radialGradient = context.createRadialGradient(渐变开始的圆心的x坐标,渐变开始的圆心的y坐标,开始圆的半径,渐变结束的圆心的x坐标,渐变结束的圆心的y坐标,结束圆的半径);

  • eg: var radialGradient = context.createRadialGradient(50,50,10,50,50,100);

阴影

常用的属性

  • shadowColor 设置阴影的颜色

  • shadowOffsetX 阴影在x方向的偏移量

  • shadowOffsetY 阴影在y方向的偏移量

  • shadowBlur 阴影的模糊程度 (0: 一点都不模糊,值越大越模糊)

案例

  • 代码 ** context.shadowColor = "gray"; context.shadowOffsetX = 30; context.shadowOffsetY = 20; context.shadowBlur = 0.8; context.fillStyle = "#058"; context.fillRect(100, 100, 300, 200); **

  • 效果

输入图片说明


常用类

Context

var context = canvas.getContext("2d");

stroke

根据路径开始绘制边框

  • eg:

    context.stroke();

strokeStyle

设置绘制的样式,一般指颜色

  • eg:

    context.strokeStyle = "red";

fill

绘制填充图形

  • eg:

    context.fill();

fillStyle

设置填充样式

  • 填充方式
    1. 常用的为颜色填充

      context.fillStyle = "green";

    2. 渐变填充

      	    // 创建一个线性渐变
          var linearGrad = context.createLinearGradient(0, 0, canvas.width, canvas.height);
          // 添加每个点的渐变效果,范围0~1
          linearGrad.addColorStop(0, "green");
          linearGrad.addColorStop(1, "yellow");
          // 设置给context
          context.fillStyle = linearGrad;
      
    3. 指定具体元素进行填充

      var pattern = context.createPattern(options, "repeat|repeat-x|repeat-y|no-repeat");

      • options:

        a. 图片

        	var backgroundImage = new Image();
        backgroundImage.src = "img/dish_steps.png";
        backgroundImage.onload = function () {
           // 设置填充样式
           var pattern = context.createPattern(backgroundImage, "no-repeat");
        
           // 设置给context
           context.fillStyle = pattern;
           context.fillRect(0, 0, canvas.width, canvas.height);
        
        };
           ```
        
        	b. canvas
        

        var backCanvas = createBackgroundCanvas(); var pattern = context.createPattern(backCanvas, "no-repeat"); context.fillStyle = pattern; context.fillRect(0, 0, canvas.width, canvas.height);

        /创建canvas/ function createBackgroundCanvas() { var backCanvas = document.createElement("canvas"); var backContext = backCanvas.getContext("2d"); backCanvas.width = 30; backCanvas.height = 20;

          backContext.fillStyle = "red";
          backContext.fillRect(10, 0, backCanvas.width, backCanvas.height);
        
          return backCanvas;
        

        }

      	c. video
      
      
      
      
      
      
      
clearRect

刷新当前的画布,参数为刷新的矩形范围

  • 参数:

    参数1:刷新的矩形的左上角的x坐标

    参数2:刷新的矩形的左上角的y坐标

    参数3:刷新的矩形的右下角的x坐标

    参数4:刷新的矩形的右下角的y坐标

beginPath

开始绘制路径

  • eg:

    context.beginPath();

closePath

结束当前的路径绘制,如果当前图形,不是闭合图形的话,会自动添加一条首尾相连的线段

  • eg:

    context.beginPath();

moveTo

绘制的开始坐标

  • 参数

    • 参数1:开始时x的坐标
    • 参数2:开始时y的坐标
  • eg:

    context.moveTo(100, 100);

lineTo

绘制线条

  • 参数

    • 参数1: 线条结束的x坐标
    • 参数2: 线条结束的y坐标
  • eg

    context.lineTo(100, 200);

lineWidth

设置要绘制的线条的粗细,值越大,线条越粗

  • eg:

    context.lineWidth = 5;

lineCap

绘制线条的帽子

context.lineCap = "options";

输入图片说明

  • optins
    1. butt (默认):方形,不会超出边界
    2. round:圆形,会超出边界
    3. square:方形,会超出边界
lineJoin

线条与线条相交处的效果

context.lineJoin = "options";

输入图片说明

  • options
    1. miter(默认):尖角
    2. bevel:斜切
    3. round:圆角
arc

绘制弧形

  • eg:

    context.arc(100, 100, 10,0, 2 * Math.PI,true);

  • 参数

    • 参数1: 圆心x的坐标
    • 参数2: 圆心y的坐标
    • 参数3: 半径
    • 参数4: 开始的弧度
    • 参数5: 结束的弧度
    • 参数6: 绘制的方向, true: 逆时针 false: 顺时针
  • 弧度(顺时针方向)

    0 --> 0*Math.PI

    90 --> 0.5*Math.PI

    180 --> Math.PI

    270 --> 1.5*Math.PI

    360 --> 2.0*Math.PI

arcTo

绘制弧形

context.arcTo(x1, y1, x2, y2, r)

注意:(x1,y1) 不是起点,(x2,y2)不是终点

  • 参数说明:

输入图片说明

  • eg:

     context.beginPath();
    
     context.moveTo(x, y);
    
     context.arcTo(x1, y1, x2, y2, r);
    
     context.strokeStyle = "blue";
    
     context.stroke();
    
quadraticCurveTo

二次贝塞尔曲线

context.quadraticCurveTo(x1,y1,x2,y2);

  • 参数说明

    x1::控制点的x坐标

    y1:控制点的y坐标

    x2:结束点的x坐标

    y2: 结束点的y坐标

    输入图片说明

bezierCurveTo

三次贝塞尔曲线

context.bezierCurveTo(x1,y1,x2,y2,x3,y3);

  • 参数说明

    x1::控制点1的x坐标

    y1:控制点1的y坐标

    x2::控制点2的x坐标

    y2:控制点2的y坐标

    x3:结束点的x坐标

    y3: 结束点的y坐标

rect

绘制矩形

rect(左上角x坐标, 左上角y坐标, 矩形的宽, 矩形的高)

  • eg:

    context.rect(100, 100, 300, 200);

fillRect

绘制矩形

fillRect(左上角x坐标, 左上角y坐标, 矩形的宽, 矩形的高)

  • eg:

    context.fillStyle = "red";

    context.fillRect(100, 100, 300, 200);

strokeRect

绘制矩形

strokeRect(左上角x坐标, 左上角y坐标, 矩形的宽, 矩形的高)

  • eg:

    context.strokeStyle = "red";

    context.strokeRect(100, 100, 300, 200);

font

默认值:"20px sans-serif"

context.font = font-style font-variant font-weight font-size font-family

  • font-style

    1. normal(默认)
    2. italic (斜体字)
    3. oblique (倾斜字体) 输入图片说明
  • font-variant

    1. normal (默认)
    2. small-caps (只有使用英文小写时才能看出区别,它会将小写转换为大写) 输入图片说明
  • font-weight

用来指定文字的粗细

1. normal (默认)
2. lighter
3. bold
4. bolder
      ![输入图片说明](https://static.oschina.net/uploads/img/201603/25091929_O5hY.png "在这里输入图片标题")
  • font-size

字号

1. 20px (默认)
2. 2em
3. 150%
  • font-family

字体

1. 可设置多种字体备选
2. 支持@font-face
3. web安全字体
text-align

设置文本的水平对齐方式

context.textAlign = "left | center | right"

输入图片说明

textBaseline

设置文本的垂直对齐方式

context.textBaseline = "top | middle | bottom"

输入图片说明

globalAlpha

设置透明度

取值范围:[0,1] 1:完全不透明

  • eg:

    context.globalAlpha = 0.8;

globalCompositeOperation

图形重叠时,重叠区域的效果

clip

context.clip()

设置剪辑区域

使用:与封闭路径配合(三角形,矩形,圆形)使用

isPointInPath

判断指定坐标是否在路径内

true:在

false: 不在

context.isPointInPath(x, y)

© 著作权归作者所有

粉丝 6
博文 35
码字总数 29999
作品 0
广州
程序员
私信 提问
android分享大会 01 | 安卓自定义View 系列

辗转千百回,原创之路太过艰辛。在创作的途中,有你们的相伴,实属幸运。原创如果去写入门级别的,又觉得网络一大堆,感觉自己重头去写,又是一次造车轮,意义不大。 于是乎,思考多次,开始...

代码GG陆晓明
2017/10/28
0
0
Qt Quick实例之挖头像

Android手机有个挺好的功能,它允许你往桌面上放窗口小部件(widget),有一个叫相框的小部件,可以让你选择一张相片,截取一部分,放在相框里。我桌面上就放了几个相框,里面是我女儿的照片...

foruok
2014/08/23
0
0
自定义View从零开始Hencoder系列文章整理

感谢大神扔物线的归纳与整理,安卓开发工程师的进阶之路,本人在此做一个整体的收藏。 第一季 HenCoder Android 开发进阶: 自定义 View 1-1 绘制基础 HenCoder Android 开发进阶: 自定义 Vi...

HELLO丶GUY
2017/11/15
0
0
Android 自定义View实战系列 :时间轴

前言 开发中,时间轴的 需求非常常见,如下图: 本文将结合 自定义 & 的知识,手把手教你实现该常见 & 实用的自定义:时间轴 目录 目录 1. 知识储备 本文采用 自定义 & 实现时间轴,所以必须...

Carson_Ho
2017/06/10
0
0
Flutter基础篇(8)-- Flutter for Web详细介绍

本文版权归作者AWeiLoveAndroid所有,未经授权,严禁私自转载。转载请声明原文链接和作者信息。 最近谷歌搞了一件大事情,Flutter也可以写Web应用了,去年我用Dart写了一下Web,请看视频介绍...

AWeiLoveAndroid
05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL 11.3 locking

rudi
今天
5
0
Mybatis Plus sql注入器

一、继承AbstractMethod /** * @author beth * @data 2019-10-23 20:39 */public class DeleteAllMethod extends AbstractMethod { @Override public MappedStatement injectMap......

一个yuanbeth
今天
10
1
一次写shell脚本的经历记录——特殊字符惹的祸

本文首发于微信公众号“我的小碗汤”,扫码文末二维码即可关注,欢迎一起交流! redis在容器化的过程中,涉及到纵向扩pod实例cpu、内存以及redis实例的maxmemory值,statefulset管理的pod需要...

码农实战
今天
4
0
为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接?

之前在阅读《阿里巴巴Java开发手册》时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符串拼接的效率...

武培轩
今天
8
0
队列-链式(c/c++实现)

队列是在线性表功能稍作修改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。作用就是通过伟大的程序员来实现算法解决现实生活...

白客C
今天
81
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部