夜光序言：
总有一天
你要褪去身上的光环
脱下已有的保护
选择独自飞翔
唯有如此
你才拥有最广阔的天空
总有一天
你要说虚伪的话语
听陌生人的倾诉
扛着责任远行
唯有如此
你才拥有最成熟的心智
总有一天
你要脱离娇纵的氛围
挂上沉默的脸皮
学着活在生活
唯有如此
你才理解最本质的生命
总有一天，总有一天
是的
总有一天
正文：
Canvas绘制图形：
Js:文件：
/**
* Created byon 2018/4/9.
*/
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle="#000";
context.strokeStyle="#f60";
context.lineWidth = 5;
context.fillRect(0,0,400,300);
}
如何设置下图布局：
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
//这样即可无缝左上角
context.fillRect(0,0,400,300);
context.strokeRect(50,50,180,120)
context.strokeRect(50,50,180,120)； // 这句话显示内部一个边框的效果
context.strokeRect(50,50,180,120);
context.strokeRect(110,110,180,120);
思考这会出现什么：
提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="huizhi.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw(`canvas`)">
<canvas id="canvas" width="400" height="380"></canvas>
</body>
</html>
Js:
/**
* Created by on 2018/4/9.
*/
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle="#000";
context.strokeStyle="#f60";
context.lineWidth = 5;
context.fillRect(0,0,400,300);
context.strokeRect(50,50,180,120);
context.strokeRect(110,110,180,120);
}
夜光：通过两部分来创建画布
Canvas绘制圆型
这次十分重要：
1：开始创建路径：
Context.beginpath
2：创建图形路径:
上下文arc方法
Context(x,y,radius,starangle,endangle,anticlockwise)
主要是半径
Radius：半径
Var radius = degrees*math.pi/180
math.pi:角度是180度
math.pi*2是360度
3：创建完成关闭路径
4：调用绘制方法进行绘制
这是一个十分精细的工作，你知道的，每一细节都要把握好，不如一个小标点，嘿嘿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制圆形</title>
<script type="text/javascript" src="yuan.js"></script>
</head>
<body onload="draw(`canvas`)">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
JS：
/**
* Created by on 2018/4/9.
*/
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "#f1f2f3";
context.fillRect(0,0,400,400);
context.beginPath();
context.arc(20,20,20,0,Math.PI*2,true);
context.closePath();
context.fillStyle = "rgba(255,0,0,0.25)";
context.fill();
}
总结提升：
/**
* Created by on 2018/4/9.
*/
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "#f1f2f3";
context.fillRect(0,0,400,400);
for(var i=0;i<10;i++){
context.beginPath();
context.arc(20,20,20,0,Math.PI*2,true);
context.closePath();
context.fillStyle = "rgba(255,0,0,0.25)";
context.fill();
}
}
//出现下面这个情况怎么解决：
明显圆圈变深了
因为半径没有跟着变化：改进如下
这种效果姑且可以，但是还可以再变化一下：
context.arc(i*20,i*20,20,i*0,Math.PI*2,true);
这个效果特别好：
/**
* Created by 夜光 on 2018/4/9.
*/
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "#f1f2f3";
context.fillRect(0,0,800,800);
for(var i=0;i<10;i++){
context.beginPath();
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fillStyle = "rgba(255,0,0,0.25)";
context.fill();
}
}
// context.arc(i*25,i*25,i*10,0,Math.PI*2,true); //十分关键
描边的效果，帅气
无数种效果需要自己去思考