canvas系列教程08-canvas各种坑

2024年2月23日 211次阅读来源: 前端大彬哥

写了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>

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

    原文作者：前端大彬哥
    原文地址: https://segmentfault.com/a/1190000012527772
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。