canvas系列教程08-canvas各种坑

最新推荐文章于 2024-07-18 11:08:54 发布

会点儿前端的大彬哥

最新推荐文章于 2024-07-18 11:08:54 发布

阅读量253

点赞数

分类专栏：前端文章标签：前端 canvas javascript 开发人员

本文链接：https://blog.csdn.net/dabinge666/article/details/78866296

版权

本文通过八个实例深入解析canvas在开发过程中遇到的常见坑，包括旋转角度、弧度转换、保存和恢复画布状态等，帮助开发者理解并解决实际问题，为后续canvas游戏开发打下基础。

摘要由CSDN通过智能技术生成

写了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();
//