Canvas基础3-绘图状态的保存与恢复

最新推荐文章于 2022-12-12 18:47:37 发布

VIP文章 hf188680

最新推荐文章于 2022-12-12 18:47:37 发布

阅读量2.6k

点赞数

分类专栏： Canvas 文章标签： Canvas

本文链接：https://blog.csdn.net/justdoitflyer/article/details/8882499

版权

今天复习两个知识点：

<!doctype html>
<html lang="en">
<head>
    <title>Just Canvas Demo</title>
    <meta charset="utf-8">
    <!--<style>-->
        <!--canvas{-->
            <!--border:1px solid orangered;-->
        <!--}-->
    <!--</style>-->
    <script src="D:/myweb/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function(){
            var canvas = $("#myCanvas");
            var context = canvas.get(0).getContext("2d");

            context.strokeStyle = "rgb(255,0,0)";
            context.strokeStyle = "rgb(0,0,255)"; //(1)
            context.save();


            context.strokeRect(10,10,100,100);
            //
            context.strokeStyle = "rgb(0,255,0)";
            context.beginPath();
            context.arc(120,120,60,0,Math.PI,false);
            context.closePath();
            context.stroke();
            //
            context.restore();   //(2)
//          注释上面这句和不注释这一句的两种结果对比很明显
            context.strokeRect(160,160,100,100);

        });
    </script>
</head>
<body>
    <canvas id="myCanvas" width="1000px" height="500px">

最低0.47元/天解锁文章

hf188680

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas基础3-绘图状态的保存与恢复

今天复习两个知识点： Just Canvas Demo --> --> $(document).ready(function(){ var canvas = $("#myCanvas"); var context
复制链接

扫一扫