【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

Html5 Canvas初探学习笔记(5) -绘图状态

原创 2012年03月23日 22:15:40

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man

在之前的文章中,提到过一些绘图的状态值,比如线宽,和颜色。在Html5Canvas中,绘图状态指的就是2d渲染上下文外观的整套属性,包括绘制轮廓颜色,填充颜色,线宽,变换矩阵,裁减区域等。我会在之后的文章中介绍更多的状态值。本篇文章就主要讲解保存状态和恢复状态的例子,讲解这个栈的结构。

首先来看下面这个例子:

                                                        

就是简单的实例一下绘制状态的存取过程,代码如下:

存状态是通过context.save();这句来存储当前的状态,把当前的状态保存到一个栈的状态中,我们首先把red这个状态存储到栈中,然后存green时,green就压在了red上面,这样在恢复状态时context.restore();,将会把栈顶的状态,返回回来,如图的显示的颜色,先被出来的是green,而弹出的状态也就不再被保存,总结起来,saverestore就相当于栈中的pushpop方法。

如有错误,希望大家多多指正

下一篇继续研究绘制的高级功能



版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

html5 canvas绘制图片模糊的问题

前提条件 假设我们要在 canvas 中绘制一张 300 x 90 的图片,并且要保证它在高清屏中不模糊。那么我们首先要准备一张 600 x 180 的图片,处理过高清屏的同学应该会有这方面...

解决html5<canvas>标签像素变大,图片变模糊的情况

html5的标签功能非常强大,但今天发现在编辑画线的时候,实际显示的像素要比设置的大很多。经过尝试终于找到了原因。 以下是一个小例子 var can = document.getEle...

html5 canvas绘制图片模糊的问题

转载地址:http://segmentfault.com/q/1010000002391424/a-1020000002391631 不光绘制图片,在高分屏下,绘制文字和线条都会出现...

HTML5-canvas绘图黑屏白屏解决方案(详解双缓冲绘图机制)

HTML5-canvas绘图黑屏白屏解决方案(详解双缓冲绘图机制) 使用canvas绘图的前端工程师可能都会遇到过canvas绘图黑屏、白屏的问题。以前写过一篇文章描述过hybrid下canvas黑...

html5 canvas 绘制横线竖线时不清晰的解决办法

在绘制一个Tip模样的图案时遇到了令人郁闷的事情:当lineHeight为1时,斜线都很清晰,唯独横线和竖线不清晰,目测占了两个像素,而且透明度都被减半;如图: ,后来经过查资料,终于知道,画布上的...

cocos2dx js 关于canvas绘图模糊问题及解决办法

最近做了一个项目,发现同一张图,在大部分安卓手机里图片很模糊,而在ios设备里显示清晰。开始我以为是图片的问题或者是手机性能的原因,但即使把图片做的再大,再清楚也还是模糊。 为此苦恼了好几天。 后...

HTML5 Canvas遇到的几个问题

最近在一个项目中尝试通过Hybrid的方式开发客户端程序,来尽量降低由于程序业务逻辑或者显示界面的改变而来的升级困扰。Hybrid的方式就是本地代码和HTML5应用相结合的方式,其中本地代码负责和底层...

HTML5使用Canvas绘图小例

首先定义canvas标签,获取这个对象后,得到 CanvasRenderingContext2D对象 var canvas = document.getElementById("myCanvas"...
  • mfcing
  • mfcing
  • 2015-10-12 21:01
  • 2217

解决Html5用canvas绘制不出来图片的问题

如果使用html5的ctx.drawImage(img,0,0);绘制不出来, 就改为: img.onload = function(){ctx.drawImage(img,0,0);} 只...
  • kepoon
  • kepoon
  • 2013-09-16 16:07
  • 4840

[实验]在同一个 canvas 元素中绘制不同颜色的图形

声明: 这是我第一次写正式的技术博客,作为大一学生,实在不能保证写出高质量的技术博客,只是想把自己遇到的问题和对一些事情的看法拿来和大家分享,请大神们果断批评指正,请比我还菜的新手们也多多思考。大家有...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)