专栏首页老马寒门ITCanvas入门到高级详解(中)

Canvas入门到高级详解(中)

三、 canvas 进阶

3.1 Canvas 颜色样式和阴影

3.1.1 设置填充和描边的颜色(掌握)

  • fillStyle : 设置或返回用于填充绘画的颜色
  • strokeStyle: 设置或返回用于笔触的颜色

以上两个值都可以接受颜色名,16 进制数据,rgb 值,甚至 rgba. 一般先进行设置样式然后进行绘制。

例如:

ctx.strokeStyle = 'red';
ctx.strokeStyle = '#ccc';
ctx.strokeStyle = 'rgb(255,0,0)';
ctx.strokeStyle = 'rgba(255,0,0,6)';

3.1.2 设置阴影(了解,少用,性能差)

  • 类比于 CSS3 的阴影。
  • shadowColor : 设置或返回用于阴影的颜色
  • shadowBlur : 设置或返回用于阴影的模糊级别,大于 1 的正整数,数值越高,模糊程度越大
  • shadowOffsetX: 设置或返回阴影距形状的水平距离
  • shadowOffsetY: 设置或返回阴影距形状的垂直距离
ctx.fillStyle = 'rgba(255,0,0, .9)';
ctx.shadowColor = 'teal';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillRect(100, 100, 100, 100);

例如:

  • 案例: 12 设置 box 盒子阴影.html
  • 设置 png 图片的阴影,图片透明部分不会被投影。

3.2 复杂样式(了解)

3.2.1 创建线性渐变的样式(了解)

  • 一般不用,都是用图片代替,canvas 绘制图片效率更高。
  • 线性渐变可以用于 矩形、圆形、文字等颜色样式
  • 线性渐变是一个对象
  • 语法:ctx.createLinearGradient(x0,y0,x1,y1); //参数:x0,y0 起始坐标,x1,y1 结束坐标
//创建线性渐变的对象,
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, 'black'); //添加一个渐变颜色,第一个参数介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
grd.addColorStop(1, 'white'); //添加一个渐变颜色
ctx.fillStyle = grd; //关键点,把渐变设置到 填充的样式

案例 13 设置线性渐变.html

3.2.2 设置圆形渐变(径向渐变) 了解

  • 创建放射状/圆形渐变对象。可以填充文本、形状等
  • context.createRadialGradient(x0,y0,r0,x1,y1,r1);
  • radial 半径的;放射状的;光线的;光线状的 英 ['reɪdɪəl] 美 ['redɪəl]
  • 参数详解:
    • x0: 渐变的开始圆的 x 坐标
    • y0: 渐变的开始圆的 y 坐标
    • r0: 开始圆的半径
    • x1: 渐变的结束圆的 x 坐标
    • y1: 渐变的结束圆的 y 坐标
    • r1: 结束圆的半径
var rlg = ctx.createRadialGradient(300, 300, 10, 300, 300, 200);
rlg.addColorStop(0, 'teal'); //添加一个渐变颜色
rlg.addColorStop(0.4, 'navy');
rlg.addColorStop(1, 'purple');
ctx.fillStyle = rlg; //设置 填充样式为延续渐变的样式
ctx.fillRect(100, 100, 500, 500);
  • 案例 14 圆形渐变.html

3.2.3 绘制背景图(了解)

  • ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素了解
  • pattern:n. 模式;图案;样品 英 ['pæt(ə)n] 美 ['pætɚn]
  • 第一参数:设置平铺背景的图片,第二个背景平铺的方式。
    • 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();
  • 案例 15 背景图填充.html

3.3 变换(重点)

3.3.1 缩放(重点)

  • scale() 方法缩放当前绘图,更大或更小
  • 语法:context.scale(scalewidth,scaleheight)
    • scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
    • scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) +注意:缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小。
  • 案例 16 缩放案例.html

3.3.2 位移画布(重点)

  • ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
  • 参数说明:
    • x: 添加到水平坐标(x)上的值
    • y: 添加到垂直坐标(y)上的值
  • 发生位移后,相当于把画布的 0,0 坐标 更换到新的 x,y 的位置,所有绘制的新元素都被影响。
  • 位移画布一般配合缩放和旋转等。
  • 案例: 17 位移画布.html

3.3.3 旋转(重点)

  • context.rotate(angle); 方法旋转当前的绘图
  • 注意参数是弧度(PI)
  • 如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。
  • 案例:18 旋转画布.html

3.3 绘制环境保存和还原(重要)

  • ctx.save() 保存当前环境的状态
    • 可以把当前绘制环境进行保存到缓存中。
  • ctx.restore() 返回之前保存过的路径状态和属性
    • 获取最近缓存的 ctx
  • 一般配合位移画布使用。
  • 案例: 19 矩形旋转案例.html

3.4 设置绘制环境的透明度(了解)

  • context.globalAlpha=number;
  • number:透明值。必须介于 0.0(完全透明) 与 1.0(不透明) 之间。
  • 设置透明度是全局的透明度的样式。注意是全局的。

3.5 画布限定区域绘制(了解)

  • ctx.clip(); 方法从原始画布中剪切任意形状和尺寸
  • 一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)
  • 一般配合绘制环境的保存和还原。

3.6 画布保存 base64 编码内容(重要)

  • 把 canvas 绘制的内容输出成 base64 内容。
  • 语法:canvas.toDataURL(type, encoderOptions);
  • 例如:canvas.toDataURL("image/jpg",1);
  • 参数说明:
    • type,设置输出的类型,比如 image/png image/jpeg 等
    • encoderOptions: 0-1 之间的数字,用于标识输出图片的质量,1 表示无损压缩,类型为: image/jpeg 或者 image/webp 才起作用。
    案例1:
    var canvas = document.getElementById("canvas");
    var dataURL = canvas.toDataURL();
    console.log(dataURL);
    // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
    // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

    var img = document.querySelector("#img-demo");//拿到图片的dom对象
    img.src = canvas.toDataURL("image/png");      //将画布的内容给图片标签显示

3.7 画布渲染画布(重要)

  • context.drawImage(img,x,y);
  • img 参数也可以是画布,也就是把一个画布整体的渲染到另外一个画布上。
    var canvas1 = document.querySelector('#cavsElem1');
    var canvas2 = document.querySelector('#cavsElem2');
    var ctx1 = canvas1.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
    ctx1.fillRect(20, 20, 40, 40);      //在第一个画布上绘制矩形

    ctx2.drawImage(canvas1, 10, 10);    //将第一个画布整体绘制到第二个画布上

3.8 了解:线条样式(了解)

  • lineCap 设置或返回线条的结束端点(线头、线冒)样式
    • butt : 默认。向线条的每个末端添加平直的边缘。
      • 翻译.:屁股;烟头;笑柄;靶垛;粗大的一端 英 [bʌt] 美 [bʌt]
    • round : 向线条的每个末端添加圆形线帽。
    • square: 向线条的每个末端添加正方形线帽。

    image 参考:23 线的样式.html

  • lineJoin 设置或返回两条线相交时,所创建的拐角类型
    • bevel: 创建斜角。 - 翻译. 斜角;斜面;[测] 斜角规 英 ['bev(ə)l] 美 ['bɛvl]
    • round: 创建圆角。 * miter: 默认。创建尖角

    image

  • lineWidth 设置或返回当前的线条宽度
  • miterLimit 设置或返回最大斜接长度
    • 意思: 斜接 英 ['maɪtə]
    • 斜接长度指的是在两条线交汇处内角和外角之间的距离。 * 一般用默认值:10 就可以了。除非需要特别长的尖角时,使用此属性。

    image

3.9 了解贝塞尔曲线(知道有)

3.9.1 绘制一条二次方曲线。

  • 微软的画图板中的曲线的颜色。
  • quadratic:二次方的意思, 英 [kwɒ'drætɪk] 美 [kwɑ'drætɪk]
  • Curve:曲线的意思, 英 [kɜːv] 美 [kɝv]
  • 语法: context.quadraticCurveTo(cpx,cpy,x,y);
  • 参数:
    • cpx: 贝塞尔控制点的 x 坐标
    • cpy: 贝塞尔控制点的 y 坐标
    • x : 结束点的 x 坐标
    • y : 结束点的 y 坐标

    image

    ctx.beginPath();
    ctx.moveTo(20,20);
    //绘制2次方曲线,贝赛尔曲线
    ctx.quadraticCurveTo(20,100,200,20);
    ctx.stroke();

3.9.2 绘制贝塞尔曲线(知道有)

  • 绘制一条三次贝塞尔曲线
  • 语法:context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
  • 提示:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
  • 参数说明:
    • cp1x: 第一个贝塞尔控制点的 x 坐标
    • cp1y: 第一个贝塞尔控制点的 y 坐标
    • cp2x: 第二个贝塞尔控制点的 x 坐标
    • cp2y: 第二个贝塞尔控制点的 y 坐标
    • x: 结束点的 x 坐标
    • y: 结束点的 y 坐标
//绘制复杂的贝塞尔曲线
ctx.beginPath();
ctx.moveTo(400,400);
//参数说明:context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
// cp1x: 第一个贝塞尔控制点的 x 坐标
// cp1y: 第一个贝塞尔控制点的 y 坐标
// cp2x: 第二个贝塞尔控制点的 x 坐标
// cp2y: 第二个贝塞尔控制点的 y 坐标
// x: 结束点的 x 坐标
// y: 结束点的 y 坐标
ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);
ctx.stroke();
  • 案例:25 绘制贝塞尔曲线.html

image

3.10 了解创建两条切线的弧(知道有)

  • 在画布上创建介于当前起点和两个点形成的夹角的切线之间的弧
  • 语法: context.arcTo(x1,y1,x2,y2,r); //类比:css3 中的圆角。
  • 例如: ctx.arcTo(240, 100, 240, 110, 40);
  • 参数:
    • x1: 弧的端点 1 的 x 坐标
    • y1: 弧的端点 1 的 y 坐标
    • x2: 弧的端点 2(终点)的 x 坐标
    • y2: 弧的端点 2(终点)的 y 坐标
    • r : 弧的半径
//代码demo:
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
//context.arcTo(x1,y1,x2,y2,r); //类比:css3中的圆角。
ctx.arcTo(240, 100, 240, 110, 40);
ctx.lineTo(240, 300);
ctx.stroke();

image

3.11 了解判断点是否在路径中(知道有)

context.isPointInPath(x,y);
//isPointInPath() 方法返回 true,如果指定的点位于当前路径中;否则返回 false。
//判断x,y坐标的点是否在当前的路径中。

3.12 了解文本宽度计算(知道有)

`context.measureText(text).width;`

3.13 如果以后做 canvas 游戏方向开发深入学习可以扩展内以下容:

  • setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
  • transform() 替换绘图的当前转换矩阵
  • globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
  • 像素操作

视频

配套视频请戳:https://www.bilibili.com/video/av26151775/

关注AICODER官网: https://www.aicoder.com

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Node入门教程(12)第十章:Node的HTTP模块

    Ryan Dahl开发node的初衷就是:把Nginx非阻塞IO功能和一个高度封装的WEB服务器结合在一起的东东。所以Node初衷就是为了高性能的Web服务器去...

    老马
  • Postman 接口测试神器

    官方 github 地址: https://github.com/postmanlabs

    老马
  • Html5 学习系列(五)Canvas绘图API快速入门(2)

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的...

    老马
  • Vue+koa2开发一款全栈小程序(4.Koa入门)

    玩蛇的胖纸
  • [享学Netflix] 四十八、Ribbon服务器过滤逻辑的基础组件:AbstractServerPredicate

    代码下载地址:https://github.com/f641385712/netflix-learning

    YourBatman
  • PICE(1):Programming In Clustered Environment - 集群环境内编程模式

    首先声明:标题上的所谓编程模式是我个人考虑在集群环境下跨节点(jvm)的流程控制编程模式,纯粹按实际需要构想,没什么理论支持。在5月份的深圳scala mee...

    用户1150956
  • 数控加工编程这些小技巧你们都注意了吗?

    如果坐标系的设定不正确,即使程序的移动指令正确,也会导致机床预想不到的运转。这种情况会损坏刀具、机床和工件,或导致操作人员受伤。

    UG数控编程
  • 学界 | 百度AAAI 2018论文提出新型NMT模型,性能堪比深层模型

    机器之心
  • [礼物]发布一款silverlight开发的相册

    采用silverlight开发了一个相册,数据是读取静态的xml,"Photos.xml"。增加了一个"AppConfig.xml",相册的信息都可以在里边修改...

    用户1172164
  • 深入浅出Kotlin协程

    协程(Coroutines)已经随着Kotlin1.3版本一起发布了1.0正式版,android平台可以使用如下方式引入:

    wiizhang

扫码关注云+社区

领取腾讯云代金券