返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题

2020-04-22 07:50:24易采站长站整理

arc方法参数很多，依次是：xy半径开始弧度（我们一般喜欢角度，所以要转换）结束弧度顺时针或者逆时针true为顺时针
其它都好说，主要这个开始角度和结束角度我们来研究下，因为开始我没搞懂，但后来我发现他其实很简单了。。。就是开始的角度和结束的角度嘛，和我们高中学的知识一样的，只不过单位换算Math.PI/180为一度。。。。
反正还是没说清楚，对了，记得我们高中画圆的除了圆规和一个计量三角形角度的半圆直尺了吗，我要说的角度就是那个。。。太坑爹了！
好像最右边是0度，垂直是90度，水平是180度，既然如此，我们再来看看
复制代码
 正时针逆时针 
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
 <script type="text/javascript">
 function draw() {
 //获取canvas对象
 var canvas = document.getElementById('canvas');
 if (canvas == null) {
 return false;
 }
 var context = canvas.getContext('2d');
 context.fillStyle = '#99d9ea';
 context.fillRect(0, 0, 400, 300); //填充画布结束
 context.beginPath();
 context.arc(80, 80, 50, 0, 180 * Math.PI / 180, true);
 context.closePath();
 context.fillStyle = 'gray';
 context.fill();
 context.beginPath();
 context.arc(180, 180, 50, 0, 180 * Math.PI / 180, false);
 context.closePath();
 context.fillStyle = 'gray';
 context.fill();
 }
 </script>
 </head>
 <body>
 <canvas id="canvas" width="400" height="300">
 </canvas>
 <button onclick="draw();">
 绘制圆</button>
 <input type="color" />
 </body>
 </html>
我们发现正时针与逆时针还是有所不同的，
 context.arc(180, 180, 50, 90 * Math.PI / 180, 290 * Math.PI / 180, true);
原谅我这里居然思考了半个小时，我甚至搜索了高中的资料。。。。
于是我好像明白了点什么。。。。。。
moveTo与lineTo
现上实验结果：
复制代码
 两次moveto 
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
 <script type="text/javascript">
 function draw() {
 //获取canvas对象
相关文章 大家在看