canvas封闭状态及状态恢复

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas封闭环境</title>
<style type="text/css">
*{
padding:0;
margin:0;

}
canvas{
border:1px solid grey;
background: rgba(0,0,0,0.4)
}
</style>
</head>
<body>
<canvas width="900" height="500">

</canvas>

<script type="text/javascript">
var c=document.getElementsByTagName('canvas')[0];//获得画布
var cv=c.getContext('2d');//获得绘画环境
//开始绘画
cv.beginPath();
cv.moveTo(100,20);//起点
cv.lineTo(100,480);//终点
cv.strokeStyle='#26ffff';//线条颜色
cv.lineWidth=10;//线条宽度
cv.stroke();//连线
cv.save();//保存当前的绘画状态

//开始绘画
cv.beginPath();
cv.moveTo(100,480);//绘画起始点
cv.lineTo(300,0);//绘画结束位置
cv.strokeStyle='#001a2e';//线条颜色
cv.lineWidth=10;//线条宽度
cv.stroke();//连线
cv.save();//保存当前的绘画状态

//开始绘画
cv.beginPath();
cv.moveTo(300,0);//绘画起始点
cv.lineTo(900,500);//绘画结束位置
cv.strokeStyle='orange';//线条颜色
cv.lineWidth=5;//线条宽度
cv.stroke();//连线
cv.save();//保存当前的绘画状态
//开启路径
cv.beginPath();
//cv.restore()返回离自己最近的一次保存状态
cv.restore();//第一次的保存,最近
cv.restore();//第二次保存
cv.restore();//第三次保存
cv.moveTo(900,500);
cv.lineTo(800,0);
cv.stroke();
////
</script>
</body>
</html>

使用context.save()会保存当前的线条颜色,宽度属性,进行多次保存,使用context.restore()恢复离之最近之前的状态,

多次调用restore()继续向上寻找sava()的状态逐级向上寻找

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

bootstrap之图片的响应式

前面提到了内容段落的响应式采用栅格系统进行不同设备的响应式,下面简单进行图片的样式和响应式介绍.

10340
来自专栏Java帮帮-微信公众号-技术文章全总结

jquery的checkbox,radio,select等方法总结

jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻。时间久了不用,我在写的时候有时也难...

17120
来自专栏奇梦博客

调整XiunoBBS上传大尺寸图片加水印错位和水印透明度 配置 JavaScript Xiu

13530
来自专栏从零开始学 Web 前端

html学习笔记(一)

单标签 <! Doctype html> 双标签 <html> </html> <head></head> <title></title>

71850
来自专栏nimomeng的自我进阶

NSScrollView官方文档

30720
来自专栏编程微刊

echarts仪表盘更换样式全圆形换成半圆

问题:想把图一的仪表盘默认样式换乘图二半圆的这个样式。官网中通过更换主题按钮切换的仪表盘样式,但是没有实际的demo~具体是怎么实现更换样式的?

73810
来自专栏十月梦想

canvas简单线条的绘制

1.绘制线条之前首先进行声明线条开始绘制代码context.beginPath;说明:context是画板中获得的绘画环境上述的是cv

7420
来自专栏javascript趣味编程

2.2.4 HTML5 Canvas绘图基础

Canvas是HTML标准近年发展到HTML5时添加的新特性,用于在网页上高效绘图。H5 canvas绘图,与MFC(Microsoft Foundation ...

14000
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——VoiceRecorder控件的使用方式.Net移动开发

      设置控件是否生成成员变量,将该属性设置为“True”,则该控件能被其他方法引用,如图6;

13830
来自专栏HTML5学堂

Canvas 基本绘制(上)

HTML5学堂:之前的文章与大家分享了SVG的一系列操作,但是SVG也是存在一些劣势,所以今天开始为大家分享介绍HTML5 Canvas的相关知识,Canvas...

396130

扫码关注云+社区

领取腾讯云代金券