canvas画布
程序员文章站
2022-04-25 19:56:46
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 500px;height: 400px;border: 1px solid gray;margin:50px auto;}
</style>
</head>
<body>
<div>
<canvas id="cvs" width="500" height="400"></canvas>
</div>
<script type="text/javascript">
/*
绘制方法：
stroke 描边 strokeStyle
fill 填充 fillStyle
画布有自己的坐标系，画布左上角即(0,0)
*/
/* //1.获取画布对象
var cvs=document.getElementById('cvs');
// 2.获取画笔对象
var ctx=cvs.getContext('2d');
console.log(ctx);
// 3.绘制
ctx.moveTo(0,0);//确定轨迹的起点
ctx.lineTo(250,200);//终点
ctx.stroke();//绘制*/
//绘制三角形
/* //获取画布对象
var cvs=document.getElementById('cvs');
//获取画笔对象
var ctx=cvs.getContext('2d');
ctx.strokeStyle='red';
// ctx.fillStyle='red';
//绘制
ctx.moveTo(100,100);
ctx.lineTo(400,100);
ctx.lineTo(400,200);
// ctx.lineTo(100,100);//回起点
ctx.closePath();//闭合路径
ctx.stroke();//描边
// ctx.fill();//填充*/
/* //绘制矩形
//获取画布对象
var cvs=document.getElementById('cvs');
//获取画笔对象
var ctx=cvs.getContext('2d');
//绘制矩形
ctx.strokeRect(100,100,300,50);
ctx.fillRect(200,200,50,50);*/
//绘制圆
//获取画布对象
var cvs=document.getElementById('cvs');
//获取画笔对象
var ctx=cvs.getContext('2d');
//添加颜色
ctx.fillStyle='red';
//绘制圆
ctx.moveTo(250,200);
ctx.arc(250,200,100,0,Math.PI*2);
ctx.fill();
//扇形
ctx.beginPath();//开启新的路径
ctx.fillStyle='green';
ctx.moveTo(250,200);
ctx.arc(250,200,100,Math.PI/4,Math.PI/2);
ctx.fill();
</script>
</body>
</html>
上一篇： 关于数据库分区后的几个查询和补充