网页中常用的两种绘图技术
SVG矢量图: 就是用标签代码来画图
canvas:是h5出技术,用来js来画图
它们两种都是代码
img也是图片,它是图片编码
在浏览器中,如果有一个自定义标签(不是浏览器定制的标签),那么浏览器就会当做文本标签识别渲染
用canvas绘图
<style type="text/css">
#box {
border: 1px black solid;
}
</style>
// canvas元素自己属于图片 因此图片有自己的编码宽高,属性来设置宽高
<canvas id="box" width="600px" height="600px">
如果不认识我,就直接显示文字,认识就解析
</canvas>
<script type="text/javascript">
// 获取标签
var canvas = document.querySelector("#box");
// 定义是绘图的内容时2d还是3d
var pen = canvas.getContext("2d");
// 画笔的起点位置
pen.moveTo(200, 200);
// 画笔的的终点位置,从起点到终点画出一条直线
pen.lineTo(400, 400);
// 绘制在页面上,不如不写这个就看不到效果
pen.stroke();
</script>
绘制出一个三角形
<style type="text/css">
#box {
border: 1px black solid;
}
</style>
<canvas id="box" width="600px" height="600px">
如果不认识我,就直接显示文字,认识就解析
</canvas>
<script type="text/javascript">
var canvas = document.querySelector("#box");
// 我写的就是上层代码,调用的函数或者方法是底层,通过对象来调用的函数或方法的这个对象就叫上下文对象
var ctx = canvas.getContext("2d");
// 线条宽度
ctx.lineWidth = 10;
// 线条颜色
ctx.strokeStyle = "red";
ctx.moveTo(100, 100);
// 会把上一次的终点作为这一次的起点,没有上一次的终点就没有这一次的起点
ctx.lineTo(300, 300);
ctx.moveTo(400, 100);
ctx.lineTo(100, 100);
ctx.moveTo(400, 100);
ctx.lineTo(300, 300);
ctx.stroke();
</script>
绘制一个矩形
<style type="text/css">
#box {
border: 1px black solid;
}
</style>
<canvas id="box" width="600px" height="600px">
如果不认识我,就直接显示文字,认识就解析
</canvas>
<script type="text/javascript">
var canvas = document.querySelector("#box");
var ctx = canvas.getContext("2d");
// 绘制矩形
// x, y, 宽, 高
ctx.rect(200, 100, 300, 400);
ctx.stroke();
ctx.fillStyle = "skyblue";
// 填充,把闭合轨迹中间填充上颜色,默认黑色
ctx.fill();
</script>
绘制柱状图
<style type="text/css">
#box {
border: 1px black solid;
}
</style>
<canvas id="box" width="600px" height="600px">
如果不认识我,就直接显示文字,认识就解析
</canvas>
<script type="text/javascript">
var canvas = document.querySelector("#box");
var ctx = canvas.getContext("2d");
var arr = [1000, 304, 120, 607, 899, 999];
ctx.moveTo(50, 500);
ctx.moveTo(580, 500);
ctx.stroke();
let h = 450/Math.max(...arr);
for(var i = 0; i < arr.length; i++) {
// 填充,把闭合轨迹中间填充上颜色,默认黑色
ctx.fillStyle = "skyblue";
ctx.fillRect(100+i*70, 500-h*arr[i], 50 ,h*arr[i] );
}
</script>
绘制扇形图
<style type="text/css">
#box {
border: 1px black solid;
}
</style>
<canvas id="box" width="600px" height="600px">
如果不认识我,就直接显示文字,认识就解析
</canvas>
<script type="text/javascript">
var canvas = document.querySelector("#box");
var ctx = canvas.getContext("2d");
var arr = [
{
name:"car",
money:2000
},{
name:"hcar",
money:1000
},{
name:"ecar",
money:600
},{
name:"carr",
money:400
},{
name:"cary",
money:1200
},
];
arr.total = 0;
for (var i = 0; i < arr.length; i++) {
arr.total = arr.total + arr[i].money
}
var start = 0;
var deg = Math.PI / 180;
arr.forEach((el) => {
ctx.beginPath();
var r = parseInt(Math.random()*255);
var g = parseInt(Math.random()*255);
var b = parseInt(Math.random()*255);
ctx.fillStyle = `rgb(${r},${g},${b})`;
var n = (el.money / arr.total) * 360;
ctx.arc(300, 300, 200, start * deg, (start + n) * deg);
ctx.lineTo(300, 300);
start = start + n;
ctx.fill();
ctx.stroke();
})
</script>