马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2021-8-11 11:08 编辑
比起让一件事变得很复杂，更重要的是把它变简单
没错，上面那句话，是我为75搞的一个说辞！
或许，正因为这种惯用“奥卡姆剃刀原理 Occam's Razor - 如无必要，勿增实体 ”让成年人的世界得到很多，也失去很多。。。
好吧，又是一句赤裸裸的废话
言归正传，继续用Canvas画一些基本图形。
使用Canvas第一步就是在body种添加调用说明。
然后写Javascript的代码，调用getContext（“2d”）。
最后，context.stroke()描边即可
这次画一个圆形和矩形吧<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
</head>
<body>
<canvas id="secondCanvas" width="666" height="666">大兄弟，你的浏览器不支持Canvas</canvas>
<script type="text/javascript">
var canvas=document.getElementById("secondCanvas");
var context=canvas.getContext("2d");
</script>
</body>
</html>
这个就应该算是最基本的Canvas使用结构了。
开始绘制矩形，就要用到strokeRect（）方法 context.lineWidth=6;
context.strokeStyle="#7F0";
context.strokeRect(150,250,199,299);
context.stroke();
context.stroke(150,150,199,299)的意思是：
从（150，150）点开始，开始绘制一个宽为199，高为299的矩形。
还可以进行填充色.context.fillStyle="#FFB7DD";
context.fillRect(150,250,199,299);
再来绘制一个圆形吧，方法和65一样调用“Math.PI*2” context.beginPath();
context.arc(500,300,100,0,Math.PI*2,false);
context.closePath();
context.stroke();
★第一、二个参数，（500，300）代表圆心坐标
★第三个参数是圆的半径。
★第四个参数代表圆周起始位置。
0对应PI就是起始位置
沿顺时针路线，分别是0.5 PI（正下方）,1 PI和1.5 PI（正上方）,为画饼图提供了扇形范围的依据。
★第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆。
★第六个参数是一个布尔值,true是顺时针false是顺时针.
因为在上面已经填色了，如果没有新的颜色要求，添加效果图：
很负责任的告诉你，会画直线、矩形、圆没卵用。。。
但是你又不得不会画，万丈高楼平地起，就是这个意思～
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（ 传送门）（ 不喜欢更要订阅 ）
官方 Web 课程：
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2017-3-13 11:24:56
置顶卡
千斤顶
显身卡
发表于 2017-3-13 12:46:13
发表于 2017-8-23 08:41:35
