html5之Canvas画图

最新推荐文章于 2022-07-15 23:10:41 发布

xiaofancn

最新推荐文章于 2022-07-15 23:10:41 发布

阅读量82

点赞数

分类专栏： web前端文章标签： HTML5 HTML

本文链接：https://blog.csdn.net/xiaofancn/article/details/83905582

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

层叠加，效果图如下

<!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 οnlοad="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/

xiaofancn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5之Canvas画图

层叠加，效果图如下 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;html5之Canvas学习&lt;/title&gt; &lt;script&gt; function init(){ var canvas = ...
复制链接

扫一扫