层叠加，效果图如下
<!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画图插件 - Literally Canvas详解》 HTML5的Canvas元素为网页带来了强大的图形绘制能力，而Literally Canvas则是一个优秀的基于Canvas的开源画图插件，它提供了一套完整的画图工具，使得用户...
html5 Canvas 画图板，学习使用html5 Canvas ，让你画画更轻松
总结起来，"canvas 画图板.zip" 提供了一个基于 HTML5 Canvas 的简易在线画图工具实现。通过解析 HTML、CSS 和 JavaScript 文件，我们可以了解如何利用 Canvas API 创建交互式的画图板，包括监听鼠标事件、绘制线条...
在这个主题下，我们将深入探讨HTML5 Canvas的基本概念、主要特性以及如何利用它来实现各种画图功能。 首先，HTML5 Canvas的使用始于在HTML文档中插入一个`<canvas>`标签。这个标签就像一块画布，可以通过JavaScript...
html5 canvas 画图练习
HTML5的Canvas是一大亮点，它使得Web页面可以直接绘制图形。在过去的网页开发中，对于复杂的图形和动画的处理往往需要借助Flash或者插件来完成，这既增加了开发难度，也影响了页面加载速度和安全性。随着HTML5的推出...
HTML5 Canvas和jQuery是现代网页开发中的两个重要技术，它们结合使用可以创建出功能丰富的交互式画图工具。Canvas作为HTML5的一个核心特性，提供了一种在浏览器中绘制图形的方法，而jQuery则是一个广泛使用的...
这个动态画图程序充分利用了Canvas API的功能，提供了直线、圆和矩形三种基本图形的绘制选项，并支持用户自定义颜色，为学习和理解HTML5 Canvas提供了一个直观的实例。 首先，Canvas是HTML5中一个非常重要的元素，...
HTML5的Canvas API是网页开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制。Canvas通过JavaScript提供了丰富的绘图函数，使我们能够创建出复杂的2D图像、动画甚至是游戏。在这次的话题中，我们将深入...
利用context.drawImage(canvasImg,copyStartPosX,copyStartPosY,copyImgWidth,copyImgHeight,canvasStartPosX,canvasStartPosY,canvasImgWidth,canvasImgHeight);实时画图呈现手电筒效果
这个"可定义笔刷和画布的HTML5 Canvas画板画图工具"利用了Canvas API来创建一个互动的画布，用户可以在这个画布上进行绘画，选择不同的笔刷样式和颜色，实现丰富的创作功能。 1. **HTML5 Canvas基本概念**：Canvas...
在这个"体会HTML5的canvas元素之图表练习源码"中，我们可以深入学习如何使用canvas来绘制各种类型的图表，包括柱状图、折线图、饼图等。 首先，canvas是一个HTML标签，通过`<canvas>`在页面上定义一个画布区域。这...
本文详细分析了HTML5技术的简介和发展前景，并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行图形绘制，创造出丰富的交互式用户体验。在这个“基于html5 canvas实现的动态文字特效代码”项目中，我们将探讨如何利用Canvas API来创建引人注目...
"HTML5 Canvas实现web画图之自由画笔"这一主题，主要关注的是如何利用Canvas API创建一个可以在web端和手机端都能使用的自由画笔功能。 首先，Canvas是一个基于矢量图形的元素，它本身并不包含任何绘制功能，而是...
本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果。分享给大家供大家参考。具体如下： 下面的玫瑰绘制用到了HTML 5的canvas，所以你的浏览器需要支持HTML 5。个人还是比较推荐chrome，这个效果在...
【HTML5 Canvas 画图程序】是一个利用HTML5的新特性Canvas进行图形绘制的应用。Canvas是HTML5中的一个核心元素，允许开发者在网页上动态绘制2D图像，为Web开发提供了强大的图形处理能力。这个源码项目是学习和进阶...
本文讨论了基于HTMLCanvas的画图板设计和实现，详细介绍了HTML5技术的发展和前景，并深入探讨了HTML5引入的关键标签Canvas元素的实现和应用。 HTML5技术概述： HTML5是近十年来Web开发标准的巨大飞跃，相比以前版本...
HTML5是现代网页开发的重要标准，它引入了许多新特性，其中Canvas元素是用于在网页上进行动态图形绘制的。Canvas提供了JavaScript API，让开发者能够直接在浏览器中进行2D绘图，无需借助Flash或其他插件。本教程将...
《基于HTML5 Canvas的Painter画图程序详解》 在当今数字化时代，网页应用程序已经发展得愈发强大，其中HTML5作为新一代的网页标准，为开发者提供了更丰富的功能和更强大的性能。Canvas作为HTML5的一项重要特性，...