层叠加，效果图如下
<!DOCTYPE html>
<html>
<head>
<title>html5之Canvas学习</title>
<script>
function init(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
ctx.save(); // save state 1
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.save(); // save state 2
ctx.rotate(Math.PI / 4);
ctx.save();// save state 3
ctx.scale(2, 2);
ctx.fillStyle = "blue";
ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
ctx.restore(); // restore state 3
ctx.fillStyle = "red";
ctx.fillRect(-rectWidth / 2, -rectHeight / 2,
rectWidth, rectHeight);
ctx.restore(); // restore state 2
ctx.fillStyle = "yellow";
ctx.fillRect(-rectWidth / 2, -rectHeight / 2,
rectWidth, rectHeight);
ctx.restore(); // restore state 1
ctx.fillStyle = "green";
ctx.fillRect(-rectWidth / 2, -rectHeight / 2,
rectWidth, rectHeight);
}
</script>
</head>
<body onload="init()">
<canvas width="150" height="200" id="canvas">
element not supported.
</canvas>
</body>
</html>
来自于
http://www.html5canvastutorials.com/advanced/html5-canvas-transformation-state-stack-tutorial/
- 大小: 1.4 KB
分享到：
相关推荐
html5 Canvas 画图板，学习使用html5 Canvas ，让你画画更轻松
html5 canvas 画图
玩转html5 的 canvas画图, canvas入门，简单介绍canvas。
NULL 博文链接：https://luanxiyuan.iteye.com/blog/1986529
html5 canvas 画图练习
Android下使用Canvas画图，详细参见博客：http://www.cnblogs.com/plokmju/p/android_Canvas.html
拓展canvas画图的clearRect()方法，实现圆形区域清理画布
该代码利用HTML5中的Canvas控件编写的画图页面，可以选择直线，圆和矩形三种图形，任意选择颜色进行画图。
html5文字特效canvas画图文字粒子动画效果代码
利用context.drawImage(canvasImg,copyStartPosX,copyStartPosY,copyImgWidth,copyImgHeight,canvasStartPosX,canvasStartPosY,canvasImgWidth,canvasImgHeight);实时画图呈现手电筒效果
HTML5画板画图工具是一款可定义笔刷和画布的HTML5 Canvas画板画图工具。
体会HTML5的canvas元素之图表练习源码
本文详细分析了HTML5技术的简介和发展前景，并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、...
基于HTML5 Canvas和jQuery 的画图工具的实现 参考博文： http://blog.csdn.net/luanlouis/article/details/38490589
本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果。分享给大家供大家参考。具体如下： 下面的玫瑰绘制用到了HTML 5的canvas，所以你的浏览器需要支持HTML 5。个人还是比较推荐chrome，这个效果在...
基于html5 canvas实现的动态文字特效代码
Painter, 基于html5 Canvas 的画图程序
canvas和html5+js的在线画图
HTML5 Canvas绘制的粒子流动爱心形状动画特效，红色粒子组成爱心动画效果。