自己学习用
学习Canvas时候 首先了解Canvas的坐标
image.png
基本格式
<canvas id="canvas" width="500" height="500">
<h1>不支持canvas时候展示</h1>
</canvas>
<script>
window.onload = function () {
var canvas = document.getElementById ('canvas');
var cxt = canvas.getContext ('2d')
}
</script>
绘制直线 多边形
<script>
window.onload = function () {
var canvas = document.getElementById ('canvas');
var cxt = canvas.getContext ('2d')
cxt.beginPath()
cxt.moveTo(100,100) //起点位置 坐标
cxt.lineTo(300,300) //到达的位置 坐标
cxt.lineTo(100,300)
cxt.lineTo(100,100)
cxt.closePath()
cxt.fillStyle = "blue" //绘制的图形的颜色
cxt.fill() //绘制填充开始
cxt.lineWidth = 5 //线条加粗
cxt.strokeStyle = "red" //绘制的线的颜色
cxt.stroke() //绘制启动
cxt.beginPath()
cxt.moveTo(200,100) //起点位置 坐标
cxt.lineTo(300,100) //到达的位置 坐标
cxt.closePath()
cxt.strokeStyle = "black"
cxt.stroke() //绘制启动
}
</script>
image.png
注意： 在没有用 cxt.beginPath() 和 cxt.closePath() 包裹的时候显示是有问题的，第二个会覆盖上面的信息。
下面简单实践写的七巧板
image.png
草稿：
image.png
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#canvas{
border: 1px solid #ccc;
display: block;
margin: 0 auto;
}
</style>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById ('canvas');
var cxt = canvas.getContext ("2d")
canvas.width = 500
canvas.height = 500
//最左边
cxt.beginPath()
cxt.moveTo(0,0)
cxt.lineTo(250,250)
cxt.lineTo(0,500)
cxt.closePath()
cxt.fillStyle="#F00"
cxt.fill()
cxt.strokeStyle = "black"
cxt.stroke() //绘制启动
//上面大的
cxt.beginPath()
cxt.moveTo(0,0)
cxt.lineTo(500,0)
cxt.lineTo(250,250)
cxt.closePath()
cxt.stroke()
cxt.fillStyle="#909"
cxt.fill()
cxt.strokeStyle = "black"
cxt.stroke() //绘制启动
//右下角
cxt.beginPath()
cxt.moveTo(500,500)
cxt.lineTo(250,500)
cxt.lineTo(500,250)
cxt.closePath()
cxt.stroke()
cxt.fillStyle="#FF0"
cxt.fill()
cxt.strokeStyle = "black"
cxt.stroke() //绘制启动
//左下角
cxt.beginPath()
cxt.moveTo(0,500)
cxt.lineTo(125,375)
cxt.lineTo(250,500)
cxt.closePath()
cxt.stroke()
cxt.fillStyle="#0C0"
cxt.fill()
cxt.strokeStyle = "black"
cxt.stroke() //绘制启动
//小矩形
cxt.beginPath()
cxt.moveTo(125,375)
cxt.lineTo(250,250)
cxt.lineTo(375,375)
cxt.lineTo(250,500)
cxt.closePath()
cxt.stroke()
cxt.fillStyle="#699"
cxt.fill()
cxt.strokeStyle = "black"
cxt.stroke() //绘制启动
//小三角形
cxt.beginPath()
cxt.moveTo(250,250)
cxt.lineTo(375,125)
cxt.lineTo(375,375)
cxt.closePath()
cxt.stroke()
cxt.fillStyle="#06C"
cxt.fill()
cxt.strokeStyle = "black"
cxt.stroke() //绘制启动
//四边形
cxt.beginPath()
cxt.moveTo(375,125)
cxt.lineTo(500,0)
cxt.lineTo(500,250)
cxt.lineTo(375,375)
cxt.closePath()
cxt.stroke()
cxt.fillStyle="#F60"
cxt.fill()
cxt.strokeStyle = "black"
cxt.stroke() //绘制启动
}
</script>
</body>
</html>
下面是将代码封装一下
<script>
window.onload = function () {
var canvas = document.getElementById ('canvas');
var cxt = canvas.getContext ("2d")
canvas.width = 500
canvas.height = 500
var data = [
{p:[{x:0,y:0},{x:250,y:250},{x:0,y:500}],color:'#F00'},
{p:[{x:0,y:0},{x:500,y:0},{x:250,y:250}],color:'#909'},
{p:[{x:500,y:500},{x:250,y:500},{x:500,y:250}],color:'#FF0'},
{p:[{x:0,y:500},{x:125,y:375},{x:250,y:500}],color:'#0C0'},
{p:[{x:125,y:375},{x:250,y:250},{x:375,y:375},{x:250,y:500}],color:'#699'},
{p:[{x:250,y:250},{x:375,y:125},{x:375,y:375}],color:'#06C'},
{p:[{x:375,y:125},{x:500,y:0},{x:500,y:250},{x:375,y:375}],color:'#F60'},
]
for (var i =0; i<data.length; i++){
draw(data[i],cxt)
}
function draw (val,cxt) {
cxt.beginPath()
cxt.moveTo(val.p[0].x,val.p[0].y)
for(var i=0;i<val.p.length; i++){
cxt.lineTo(val.p[i].x,val.p[i].y)
}
cxt.closePath()
cxt.fillStyle=val.color
cxt.fill()
}
}
</script>
网友评论