canvas系列教程08-canvas各种坑

头像
彬哥头发多
    阅读 7 分钟
    3

    写了canvas系列教程的图表库部分和基础教程，收到了很多人的留言，针对大家问题的问题集中做一次填坑。

    首先是编辑器，

    之前用了用atom，这几天写了一个canvas图表库，全程使用atom，说下感受。

    webstorm 就相当于你妈，你想要的不想要的都给你，但是显得有点唠唠叨叨（功能太全，好多用不上，打开慢），而atom就相当于你的儿子，一张白纸，只要你调理的好，太就会按照你的想法去做事儿（简洁的界面，丰富的插件系统，非常灵活定制）。缺点也是这个，虽然他只是编辑器，但是相比bracket，sublime还是简洁的有点寒酸，你连买包烟都得跟你儿子说去哪家，什么牌子，还有别让老板给你假烟。太麻烦了。

    总结，atom很适合学习的时候使用，因为你不知道怎么配置插件所以能把代码熟练度练好，也非常适合有经验的人使用，因为如果调教的经验，那么他会完全按照你的方式工作。

    编辑器就到这里，说技术。

    第一个坑，

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #c1{
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload = function(){
            var oC = document.getElementById('c1');
            var gd = oC.getContext('2d');
            gd.beginPath();
            gd.strokeRect(100,100,300,100);
            gd.rotate(30);//先选转，后绘制，不然就算改了没人绘制没有用

        };
    </script>
</head>
<body>
    <canvas id="c1" width = '800' height="600"></canvas>
</body>
</html>

    第二个坑，

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #c1{
            border: 1px solid black;
        }
    </style>
    <script>
        function d2a(n){
            return Math.PI*n/180;
        }
        window.onload = function(){
            var oC = document.getElementById('c1');
            var gd = oC.getContext('2d');
            gd.beginPath();
//            gd.rotate(30);//不墨迹，用弧度
            gd.rotate(d2a(90));//不墨迹，用弧度
            gd.strokeRect(100,100,300,100);


        };
    </script>
</head>
<body>
    <canvas id="c1" width = '800' height="600"></canvas>
</body>
</html>

    第三个坑，

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #c1{
            border: 1px solid black;
        }
    </style>
    <script>
        function d2a(n){
            return Math.PI*n/180;
        }
        window.onload = function(){
            var oC = document.getElementById('c1');
            var gd = oC.getContext('2d');
            gd.rotate(d2a(30));//跟你想的不一样，这里旋转的是画布
            gd.strokeRect(100,100,200,100);

            gd.beginPath();
            gd.fillStyle = 'rgba(255,0,0,0.5)';
            gd.fillRect(0,0,oC.width,oC.height);

        };
    </script>
</head>
<body>
    <canvas id="c1" width = '800' height="600"></canvas>
</body>
</html>

    第四个坑，

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #c1{
            border: 1px solid black;
        }
    </style>
    <script>
        function d2a(n){
            return Math.PI*n/180;
        }
        window.onload = function(){
            var oC = document.getElementById('c1');
            var gd = oC.getContext('2d');
            gd.strokeStyle = 'red';
            var d = 0;
            gd.lineWidth = 20;
            function draw(){
                gd.clearRect(0,0,oC.width,oC.height);//这里是为了防止毛边
                gd.beginPath();
                gd.arc(200,200,100,d2a(0),d2a(d++),false);
                gd.stroke();
                window.requestAnimationFrame(draw);
            }
            window.requestAnimationFrame(draw);//防止卡顿，不用定时器
            window.requestAnimationFrame = (function(){
                return  window.requestAnimationFrame       ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame    ||
                        window.msRequestAnimationFrame     ||
                        function(callback){
                            window.setTimeout(callback, 1000 / 60);//低版本保险刷新频率
                        };
            })();

        };
    </script>
</head>
<body>
    <canvas id="c1" width = '800' height="600"></canvas>
</body>
</html>

    第五个坑，

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #c1{
            border: 1px solid black;
        }
    </style>
    <script>
        function d2a(n){
            return Math.PI*n/180;
        }
        window.onload = function(){
            var oC = document.getElementById('c1');
            var gd = oC.getContext('2d');
            gd.save();//保存状态、删除你会看到状态叠加
            gd.rotate(d2a(10));
            gd.strokeRect(100,100,200,100);
            gd.restore();

            gd.save();
            gd.beginPath();
            gd.rotate(d2a(10));
            gd.strokeRect(400,300,200,100);
            gd.restore();

        };
    </script>
</head>
<body>
    <canvas id="c1" width = '800' height="600"></canvas>
</body>
</html>

    第六个坑，

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #c1{border:1px solid black;}
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var oC = document.getElementById('c1');
      var gd =oC.getContext('2d');
      gd.lineWidth = 20;
      gd.strokeStyle = 'red';
      gd.beginPath();
      gd.moveTo(300,100);
      gd.lineTo(300,300);
      gd.stroke();
      gd.strokeStyle = 'green';

      // gd.beginPath(); 这个例子说明为什么用beginPath
      gd.moveTo(100,100);
      gd.lineTo(100,300);
      gd.stroke();
    };
  </script>
</head>
<body>
  <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

    第七个坑，

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #c1{
            border: 1px solid black;
        }
    </style>
    <script>
        function d2a(n){
            return Math.PI*n/180;
        }
        window.onload = function(){
            var oC = document.getElementById('c1');
            var gd = oC.getContext('2d');
            gd.beginPath();
            gd.fillStyle = 'red';
            gd.fillRect(100,100,50,50);
            gd.beginPath();
            gd.fillStyle = 'green';
            gd.fillRect(200,100,50,50);

            gd.beginPath();
            gd.fillStyle = 'blue';
            gd.fillRect(300,100,50,50);

            gd.fillRect(100,200,50,50);
            gd.fillRect(200,200,50,50);
            gd.fillRect(300,200,50,50);


        };
    </script>
</head>
<body>
    <canvas id="c1" width = '800' height="600"></canvas>
</body>
</html>

    第八个坑，

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #c1{
            border: 1px solid black;
        }
    </style>
    <script>
        function d2a(n){
            return Math.PI*n/180;
        }
        window.onload = function(){
            var oC = document.getElementById('c1');
            var gd = oC.getContext('2d');
            //canvas用的是 stack栈管理 后进先出
            gd.beginPath();
            gd.fillStyle = 'red';
            gd.save();
            gd.fillRect(100,100,50,50);
            gd.beginPath();
            gd.fillStyle = 'green';
            gd.fillRect(200,100,50,50);

            gd.beginPath();
            gd.save();
            gd.fillStyle = 'blue';
            gd.fillRect(300,100,50,50);
            gd.save();

            gd.restore();

            gd.fillRect(100,200,50,50);
            gd.restore();

            gd.fillRect(200,200,50,50);
            gd.restore();

            gd.fillRect(300,200,50,50);


        };
    </script>
</head>
<body>
    <canvas id="c1" width = '800' height="600"></canvas>
</body>
</html>

    这些坑弄完了，后面我们就开始写游戏。

    javascripthtml5canvas前端
    彬哥头发多
    4.3k 声望1.4k 粉丝

    一个会写代码的职业规划师，2本职业规划书作者。争取未来1年帮100个朋友薪资上涨50%。

    « 上一篇
    canvas系列教程07-canvas动画基础1
    下一篇 »
    javascript职业技能基础测试C1

    引用和评论

    推荐阅读
    头像
    vue3公司自用项目实战入门（vue3+router4+antdv+pinia实现）

    彬哥头发多赞 2阅读 3.4k评论 1

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新