用画布画一些图形
矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布</title>
<style>
#canvas{
border: 1px solid orange;
/*在样式里设置宽高不行 这里设置的是“画板”的宽高 只能通过js或者属性设置*/
/*width: 1000px;*/
/*height: 600px;*/
}
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="300px"></canvas>
</body>
<script>
// console.log(document.getElementById('canvas').width);
//1.准备画布标签
//2.查找画布元素
//3.获取画布对象
//3.调用画布的API作图
var canvas = document.getElementById("canvas");
var cvs = canvas.getContext("2d");
cvs.beginPath();//开始作画
cvs.lineWidth = 30;
cvs.lineCap = "round";//圆角
cvs.lineJoin = "bevel";//平角
cvs.strokeStyle="#0000ff";
cvs.moveTo(50,50);//起点
cvs.lineTo(450,50);//第二点
cvs.lineTo(450,250);//第三点
cvs.lineTo(50,250);//第四点
cvs.lineTo(50,50);//回到起点
//cvs.closePath();//和上面一样的效果
cvs.stroke()
</script>
</html>
矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布矩形</title>
<style>
#canvas {
border: 1px solid orange;
/*在样式里设置宽高不行 这里设置的是“画板”的宽高 只能通过js或者属性设置*/
/*width: 1000px;*/
/*height: 600px;*/
}
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="300px"></canvas>
</body>
<script>
//console.log(document.getElementById('canvas').width);
//1.准备画布标签
//2.查找画布元素
//3.获取画布对象
//3.调用画布的API作图
var canvas = document.getElementById("canvas");
var cvs = canvas.getContext("2d");
cvs.beginPath();//开始作画
cvs.strokeStyle = "silver";
cvs.fillStyle = "gold";
cvs.lineWidth = 5;
cvs.rect(50, 50, 500, 200);
cvs.stroke();//描边
cvs.fill();//填充
</script>
</html>
圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布圆</title>
<style>
#canvas {
border: 1px solid orange;
}
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="600px"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var cvs = canvas.getContext("2d");
cvs.beginPath();//开始作画
cvs.strokeStyle = "silver";
cvs.fillStyle = "gold";
cvs.lineWidth = 5;
cvs.arc(300,300,270,0,2*Math.PI);
cvs.stroke();//描边
cvs.fill();//填充
</script>
</html>
扇形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布扇形</title>
<style>
#canvas {
border: 1px solid orange;
}
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="600px"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var cvs = canvas.getContext("2d");
cvs.beginPath();//开始作画
//cvs.strokeStyle = "gold";
cvs.fillStyle = "gold";
cvs.lineWidth = 5;
cvs.moveTo(300,300);
cvs.arc(300,300,270,0,1.1*Math.PI);
cvs.closePath();
//cvs.stroke();//描边
cvs.fill();
//cvs.strokeStyle = "green";
cvs.fillStyle = "mediumspringgreen";
cvs.beginPath();
cvs.moveTo(300,300);
cvs.arc(300,300,270,1.1*Math.PI,1.4*Math.PI);
cvs.closePath();
//cvs.stroke()
cvs.fill();
//cvs.strokeStyle = "green";
cvs.fillStyle = "deepskyblue";
cvs.beginPath();
cvs.moveTo(300,300);
cvs.arc(300,300,270,1.4*Math.PI,1.8*Math.PI);
cvs.closePath();
//cvs.stroke()
cvs.fill();
//cvs.strokeStyle = "green";
cvs.fillStyle = "red";
cvs.beginPath();
cvs.moveTo(300,300);
cvs.arc(300,300,270,1.8*Math.PI,2*Math.PI);
cvs.closePath();
//cvs.stroke()
cvs.fill();
</script>
</html>
文本:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本</title>
<style>
#canvas {
border: 1px solid orchid;
}
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="400px"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var cvs = canvas.getContext("2d");
cvs.beginPath();
cvs.fillStyle = "deepskyblue";
cvs.font = "30px 微软雅黑";
cvs.fillText("Surprise Mother Fucker",50,100);//从左下角开始算 后两个数是xy坐标
//空心字体
cvs.strokeStyle = "gold";
cvs.font = "45px 宋体";
cvs.strokeText("Surprise Mother Fucker",50,200);
//颜色渐变
cvs.font = "45px 宋体";
var gradient = cvs.createLinearGradient(50,200,450,300);//xy轴开始位置 xy轴结束位置
gradient.addColorStop(0,"blue");
gradient.addColorStop(0.5,"red");
gradient.addColorStop(1,"green");
cvs.fillStyle = gradient;
cvs.fillText("Surprise Mother Fucker",50,300);
</script>
</html>