/** *save是保存当前绘图状态,并把它压入一个堆栈 restore是恢复上次保存的绘图状态,从堆栈弹出。 关键在于绘图状态,它是指Canvas的平移、放缩、旋转、错切、裁剪等操作或者颜色、线条等样式。 */ window.onload = function() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.translate(50, 50); 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刚点在左下角(因restore到save前的状态【那个状态是画布没有旋转90度的, //此时,中心点在中间,起点40、40处画方形:fillRect(40, 40..就是在左下角的位置了 】) context.stroke(); }
相关推荐
android中canvas的save和restore用法 源码 测试代码
讲解使用canvas.save()和canvas.restore()的demo
《HTML5 Canvas 开发详解》第二版pdf 版
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
android 中canvas的save和resotre用法 测试代码
HTML5 canvas开发详解 第2版 高清 电子书 pdf 下载 [(美)STEVE FULTON,JEFF FULTON著;任旻,罗泽鑫译][人民邮电出版社]
Html5 Canvas 开发详解第二版 示例代码
该代码是一个完整的Android工程,详细演示如了如何使用Android中的各种drawXXX方法,以及画笔Paint如何影响绘制的效果。 具体参见博文: http://blog.csdn.net/iispring/article/details/49770651
HTML5 Canvas 开发详解(第2版)
原书名:HTML5 Canvas 原出版社: O'Reilly Media 作者: (美)Steve Fulton Jeff Fulton 译者: 任旻 王洋 邹鋆弢 出版社:人民邮电出版社 ISBN:9787115321862 上架时间:2013-8-13 出版日期:2013 年8月 ...
资源名称:HTML5 Canvas开发详解(第2版)内容简介:随着Canvas的持续升温,Flash的光芒迅速消退。本书是Canvas的畅销图书,它在上一版的基础上,通过讲解如何开发可交互式多媒体应用,引导读者学习HTML5 Canvas。...
《HTML5 Canvas核心技术》内的实例代码
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
html5 canvas 播放视频html5 canvas 播放视频
一:canvas中的save和restore 一直以来没有特别明白canvas中的save()和restore()函数,这次终于通过微信小程序中使用此函数的时候弄明白了,以下代码可以运行在微信小程序中~~ 看效果: (此图片来源于网络,如有...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
主要介绍了详解Html5 Canvas画线有毛边解决方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
《HTML5 canvas开发详解(第2版)》
html5 canvas 制作流程图 EaselJS html5 canvas 制作流程图 EaselJS