canvas
2022-07-06 本文已影响0人
冰点雨
注意：不能用样式设置宽高，使用属性 width height设置宽高
画线
WeChatae9e97d0ffc96506fde3954bc7c63678.png
<body>
<!-- 不能用样式设置宽高，使用属性 width height设置宽高-->
<canvas width="400" height="400"></canvas>
</body>
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.moveTo(100,100);
ctx.lineTo(100,200);
ctx.lineTo(200,100);
// 设置填充颜色
ctx.fillStyle="red";
ctx.fill();
// 设置线的颜色
ctx.strokeStyle="yellow";
ctx.lineWidth = "10";
// 设置收尾相连
ctx.closePath();
ctx.stroke();
</script>
画矩形
WeChat9d6834c1802fed70184c3043ec8faf6f.png
<body>
<!-- 不能用样式设置宽高，使用属性 width height设置宽高-->
<canvas width="600" height="200"></canvas>
</body>
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
// 边框
ctx.strokeRect(10,100,40,100);
// 填充
ctx.fillStyle = "red";
ctx.fill();
ctx.fillRect(100,100,40,100);
ctx.stroke();
</script>
画圆形
WeChat02c10f0b8e68db1ff7e1bc2c2ce59886.png
<body>
<!-- 不能用样式设置宽高，使用属性 width height设置宽高-->
<canvas width="600" height="400"></canvas>
</body>
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
// 开始绘制
ctx.beginPath();
// .arc(x,y,r,开始弧度,结束弧度,是否逆时针绘制) x,y 圆心坐标
ctx.arc(100,100,50,0,2*Math.PI,true);
ctx.fillStyle = "red";
ctx.fill();
ctx.strokeStyle="blue";
ctx.lineWidth = '10';
ctx.stroke();
</script>
画布清除与绘制文字
清除画布
ctx.clearRect(100,200,50,100);
绘制文字
ctx.font = "40px 微软雅黑";ctx.clearRect(0,0,600,400);
ctx.fillStyle = "red";
ctx.fillText('绘制文字',50,50);
WeChate31ddd432ee94c0f8f190ac475779a9d.png
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(100,200,100,200);
// 清除整个画布
// ctx.clearRect(0,0,600,400);
// 清除部分画布
ctx.clearRect(100,200,50,100);
// 绘制文字
ctx.font = "40px 微软雅黑";
ctx.fillStyle = "red";
ctx.fillText('绘制文字',50,50);
</script>
练习:画柱形图
WeChat7169ea06bd102562b11514e2bae63dc5.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding:0px;
}
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 不能用样式设置宽高，使用属性 width height设置宽高-->
<canvas width="800" height="420"></canvas>
</body>
</html>
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
// 绘制文字
ctx.font = "16px 微软雅黑";
ctx.fillText('数据可视化',50,50);
// 绘制坐标系
ctx.moveTo(100,100);
ctx.lineTo(100,400);
ctx.lineTo(700,400);
// 绘制横向分割线
let vTexts = ['150','120','90','60','30','0'];
let vSpaceHeight = 300/(vTexts.length-1);
for (var i=0;i<vTexts.length;i++){
if(i < vTexts.length-1){
ctx.moveTo(100,100+i*vSpaceHeight);
ctx.lineTo(700,100+i*vSpaceHeight);
}
ctx.fillText(vTexts[i],70,100+vSpaceHeight*i)
// ctx.strokeStyle = "gray";
}
// 绘制水平轴底部的线
let hTexts = ['食品','数码','服饰','箱包'];
let hSpaceWidth = 600/hTexts.length;
let textWidth = 20;
let space = 60;
let columnarWidth = hSpaceWidth-space;
for (var i=0;i<hTexts.length;i++){
ctx.moveTo(100+hSpaceWidth*(i+1),400);
ctx.lineTo(100+hSpaceWidth*(i+1),410);
ctx.fillText(hTexts[i],100+hSpaceWidth*i+hSpaceWidth/2-textWidth,415)
ctx.fillStyle = "red";
ctx.fillRect(100+hSpaceWidth*i+space/2,400-140,columnarWidth,140);
}
ctx.stroke();
</script>
