1. 图形变换

canvas是基于状态绘制图形的。故此一般情况下,canvas的绘制的图形路径和状态时分离的。

function drawShape(ctx){

    // 绘制路径
shapePath(ctx); // 进行填充或者绘制
// ...
} function shapePath(ctx){ ctx.beginPath(); // 图形路径
// ... ctx.closePath(); }

在填充或绘制之前可以调用一些状态或者图形变换的来设置当前绘制图形的状态。

这里所说的图形变换大致指的就是:

1> 位移 translate(x,y) : 将canvas画布进行位移显示。将坐标原点移动到(x,y)的位置,translate将原点移动之后,如果再次调用translate进行移动,那么会依照上一个translate移动之后作为原点参考。

2> 旋转 rotate(deg) : 将canvas画布进行旋转显示

3> 缩放 scale(sx,sy) : 将canvas画布进行缩放显示

2.canvas状态的保存和恢复

save()函数:保存当前的图形状态

restore()函数:返回save()函数保存时候的状态

function drawShape(ctx){

    ctx.save(); // 状态保存

    // 绘制路径
shapePath(ctx); // 进行填充或者绘制
// ... ctx.restore(); // 状态恢复
} function shapePath(ctx){ ctx.beginPath(); // 图形路径
// ... ctx.closePath(); }

3. 变换矩阵

transform(a,b,c,d,e,f)状态会叠加。

setTransform(a,b,c,d,e,f)将变换矩阵首先变成单位矩阵,然后在对传入的参数进行图形变换,会忽略之前所有的transform操作。

HTML5-Canvas 图形变换+状态保存的更多相关文章

  1. HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  3. HTML5之图形变换

    - Transformations scale(0.5,0.5) 缩放 rotate(0.175) 旋转 translate(100,50) 位移 - 代码结构 context.scale(x, y) ...

  4. HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Canvas 总结,到第4章 canvas图形变换

    canvas 必须认识到的大坑 <!-- 重点: 在js/canvas标签中定义的宽和高是画布实际的宽和高. 在样式表中定义的宽和高是画布缩放后的宽和高. 即:把js/canvas实际大小缩放到 ...

  7. html5 canvas缩放变换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 学习 TList 类的实现[8]

    现在准备建立 Items 数组属性; 在 public 区输入下面代码:property Items[Index: Integer]: Pointer; 执行 Shift+Ctrl+C 后的代码是: ...

  2. 如何将ppt转换为高清图片?

    PPT2010版本直接提供了“另存为”图片的功能,但另存为后的图片清晰度不够,这是因为office提供的默认点每英寸点数 (dpi)为96dpi,也就是说图片的尺寸为960x720像素,通过注册表可以 ...

  3. 搭建LNMP+CI环境

    首先搭建 LNMP 的服务器环境 安装 Nginx, MySQL 和 PHP 软件包,执行以下命令 yum install -y nginx mariadb-server mariadb php ph ...

  4. schema in oracle

    the conception of schema is different in different db software. here i just refer to oracle schema. ...

  5. 如何把he_llo wo_rld 变成 HeLlo WoRld

    有人问如何把he_llo wo_rld 变成 HeLlo WoRld,估计应该是一道面试的基础题吧. 思路很多种,就看如何实现 思路一.先根据空格分隔,然后转大写,最后再拼接.代码如下 <?ph ...

  6. redis的初认识

    Redis是一个开源,先进的key-value存储,并用于构建高性能,可扩展的Web应用程序的完美解决方案. Redis从它的许多竞争继承来的三个主要特点: Redis数据库完全在内存中,使用磁盘仅用 ...

  7. Topic 与 Partition

    Topic在逻辑上可以被认为是一个queue队列,每条消息都必须指定它的topic,可以简单理解为必须指明把这条消息放进哪个queue里.为 了使得Kafka的吞吐率可以水平扩展,物理上把topic分 ...

  8. 【RF库Collections测试】Convert To List

    Name:Convert To ListSource:Collections <test library>Arguments:[ item ]Converts the given `ite ...

  9. nano100B的看门狗讲解

    看门狗定时器的用途是在软件出问题时执行系统复位功能,这可以防止系统无限期地挂起.除此之外,看门狗定时器还支持将CPU 从掉电模式唤醒的功能.看门狗定时器包含一个18 位的自由运行计数器,定时溢出间隔可 ...

  10. jq如何实现内容的无限滚动

    html: <div> <ul> <li>1</li> <li>2</li> <li>3</li> &l ...