写了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. = 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. = 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. = 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. = 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. = 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. = 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. = 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. = 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://www.jianshu.com/p/cb44ba7f5651
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦