HTML5中canvas的save和restore方法

时间：2022-08-26 08:05:20

canvas的save和restore方法：

save() 方法把当前绘画状态的一份拷贝压入到一个保存图像状态的栈中。这里的绘画状态指坐标原点、变形时的变化矩阵（该矩阵是调用 rotate()、scale() 和 translate() 的结果）、以及图形上下文对象的当前属性值等内容。

1.图像上下文CanvasRenderingContext2D的属性和方法：

属性                              描述
canvas                          取得画布Canvas 元素。
fillStyle                          填充路径的当前的颜色、模式或渐变。值：字符串、CanvasGradient 对象或 CanvasPattern 对象。
globalAlpha                    绘制内容的不透明度。值：在 0.0（完全透明）和 1.0（完全不透明）范围间。默认值为 1.0。
globalCompositeOperation        指定颜色如何与画布上已有颜色组合（合成）。
lineCap                          指定线条末端如何绘制。值：butt、round和square。默认值是 butt。
lineJoin                          指定两条线条如何连接。值：round、bevel和miter。默认值是 "miter"。
lineWidth                       绘制线条的线条宽度。默认值是 1.0，且必须大于 0.0。线条在路径上居中，每边有线条宽的一半。
miterLimit                       当 lineJoin 为miter时，这个属性指定斜连接长度和线条宽度的最大比率。
shadowBlur                    指定羽化阴影的程度。默认值是 0。
shadowColor                  把阴影颜色指定为CSS字符串或Web样式字符串，且可包含alpha部分来表示透明度。默认值是 black。
shadowOffsetX, shadowOffsetY    指定阴影水平和垂直偏移。较大值使得阴影化对象漂浮在背景较高位置上。 默认值是 0。
strokeStyle                     绘制路径的颜色、模式和渐变。值：字符串、CanvasGradient 对象或 CanvasPattern 对象。

CanvasRenderingContext2D方法
方法                            描述
arc()                           用一个中心点和半径，为一个画布的当前子路径添加一条弧线。
arcTo()                         使用目标点和一个半径，为当前的子路径添加一条弧线。
beginPath()                     开始一个画布中的一条新路径（或者子路径的一个集合）。
bezierCurveTo()                 为当前的子路径添加一个三次贝塞尔曲线。
clearRect()                     在一个画布的一个矩形区域中清除掉像素。
clip()                          使用当前路径作为连续绘制操作的剪切区域。
closePath()                     如果当前子路径是打开的，就关闭它。
createLinearGradient()          返回代表线性颜色渐变的一个 CanvasGradient 对象。
createPattern()                 返回代表贴图图像的一个 CanvasPattern 对象。
createRadialGradient()          返回代表放射颜色渐变的一个 CanvasGradient 对象。
drawImage()                     绘制一幅图像。
fill()                          使用指定颜色、渐变或模式来绘制或填充当前路径的内部。
fillRect()                      绘制或填充一个矩形。
lineTo()                        为当前的子路径添加一条直线线段。
moveTo()                        设置当前位置并开始一条新的子路径。
quadraticCurveTo()              为当前路径添加一条贝塞尔曲线。
rect()                          为当前路径添加一条矩形子路径。
restore()                       为画布重置为最近保存的图像状态。
rotate()                        旋转画布。
save()                          保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。
scale()                         标注画布的用户坐标系统。
stroke()                        沿着当前路径绘制或画一条直线。
strokeRect()                    绘制（但不填充）一个矩形。
translate()                     转换画布的用户坐标系统。

2.translate() 方法为画布的变换矩阵添加水平的和垂直的偏移。参数 dx 和 dy 添加给后续定义路径中的所有点。

restore() 方法从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>canvas元素示例</title>

<script >

function draw(id) {

    var canvas = document.getElementById(id);

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

    context.translate(200, 200);

    context.save();              //坐标原点移到画布中心，并保存这个状态

    context.rotate(Math.PI/2);    //旋转90度

    context.beginPath();

    context.moveTo(0, -50);

    context.lineTo(-50, 0);

    context.moveTo(0, -50);

    context.lineTo(50, 0);

    context.moveTo(0, -50);

    context.lineTo(0, 50);

    context.closePath();          //画一个向右的箭头

    context.restore();

    context.fillRect(40, 40, 10, 10);  //画一点，restore后点在右下角，没有restore刚点在左下角，如图

    context.stroke();

}

</script>

</head>

<body onload="draw('canvas');">

<h1>canvas中画矩形</h1>

<canvas id="canvas" width="400" height="300" />

</body>

</html>

context.save()在调用rotate()函数之前保存了画布向右旋转90度之前绘画状态，所以在save和restore之间绘制的图形都是向右旋转90度的，在调用restore之后画了一个正方形，最后显示正方形是没有经过旋转的。

显示结果：

HTML5中canvas的save和restore方法

注释掉context.restore()之后：

HTML5中canvas的save和restore方法

HTML5中canvas的save和restore方法的更多相关文章

  1. android&lowbar;浅析canvas的save&lpar;&rpar;和restore&lpar;&rpar;方法

    <span style="font-size:18px;"> </span> <span style="font-size:18px;&qu ...

  2. canvas的save与restore方法的作用

    网上搜罗了一堆资料,最后总结一下. save:用来保存Canvas的状态.save之后,可以调用Canvas的平移.放缩.旋转.错切.裁剪等操作. restore:用来恢复Canvas之前保存的状态. ...

  3. canvas中save&lpar;&rpar;和restore&lpar;&rpar;方法

    save()和restore()方法是绘制复杂图形不可缺少的方法它们是分别用来保存和恢复canvas状态的,都没有参数 save():用来保存Canvas的状态.save之后,可以调用Canvas的平 ...

  4. Canvas的save和restore

    在onDraw方法里,我们经常会看到调用save和restore方法,它们到底是干什么用的呢? int px = getMeasuredWidth(); int py = getMeasuredWid ...

  5. H5&lowbar;0009：关于HTML5中Canvas的宽、高设置问题

    关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一:        <canvas widt ...

  6. HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的

    HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...

  7. HTML5 canvas save&lpar;&rpar;和restore&lpar;&rpar;方法讲解

    我们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工作的.第一步是用默认设置画一个大四方形,然后保存一下状态.改变填充颜色画第二个小一点的白色四方形,然后再保存一下状态.再次改变填充颜色 ...

  8. html5中canvas（2）

    1.绘制图片(drawImage)(重点) 1.1 基本绘制图片的方式 context.drawImage(img, x, y); 参数: img 可以为:图片.视频或者canvas画布 x,y 绘制 ...

  9. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

随机推荐

  1. python多线程之semaphore（信号量）

    #!/usr/bin/env python # -*- coding: utf-8 -*- import threading import time import random semaphore = ...

  2. libsvm&plus;detector&lowbar;&lpar;libsvm参数说明&rpar;

    细分析了cvhop.cpp中的compute函数,可以直接调用它来获得样本HOG,然后训练得到检测算子 1.制作样本2.对每一张图片调用hog.compute(img, descriptors,Siz ...

  3. tcprstat的使用方式

    两种使用方式:1)本机直接在线采集:2)分析tcpdump采集到的离线pcap文件   1. 本机直接在线采集 参数:   -p :指定只采集此TCP port的请求   -t  : 采集输出的时间间 ...

  4. Andriod x86 4&comma;4

    用 vbox 装了下Andriod x86 4,4 ,能用的App真心少,反正我只是用来看看安卓浏览器里网站效果,海豚浏览器还有qq浏览器x86版,还能用用,主要要换UA为iphone和ipad之类的 ...

  5. ios ReactiveViewModel

    项目中使用 ReactiveCocoa 一般都会嵌入ReactiveViewModel 或者 ReactiveCocoaLayout 联合处理UI.网络.动画.布局.窗口切换等,组合使用时威力惊人. ...

  6. 201521123110《Java程序与设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 时间数据不同 ...

  7. iOS逆向工程之Cycript

    1.连接设备 打开一个终端,输入指令: iproxy 重新打开一个新的终端,输入指令: ssh -p root@127.0.0.1 这时候会提示输入密码:默认密码为“alpine”.这样就可以连接到设 ...

  8. Linux基础第五课——用户管理

    用户管理 一个用户必须有一个主组 一个用户可以拥有多个组 但是必须一个主组 其它组是临时组 一个组可以拥有多个用户 用户的信息放到 /etc/passwd 用户的密码 存入 /etc/shadow 组 ...

  9. mysql基础常用命令

    数据库 1查询 Select * From table select host,user,password from mysql.user where user='ybb' and host='%'; ...

  10. 一起做RGB-D SLAM&lpar;8&rpar; （关于调试与补充内容）

    “一起做”系列完结后,我收到不少同学给我的反馈.他们提了一些在程序编译/运行过程中的问题.我把它们汇总起来,组成了这个“补充篇”.你也可以看成是一个Q&A. Q: OpenCV的版本?A: 我 ...

相关文章