如果写代码不是为了装逼,那人生将毫无意义。都2020年了,如果你从事前端开发,连canvas都不会用,那你拿啥去装逼?下面跟着笔者一起来看看canvas是啥,可以用来做啥,有哪些产品是canvas做出来的。
Canvas介绍
1.canvas是html5的一个新标签,属于h5的新特性
2.canvas标签是一个图形的容器,简单点说就是一块画布,你可以在上画矩形,圆形,三角形,折线等等,也可以用来画logo
3.它是通过javascript来画的,即脚本绘制图形
canvas可以用来干啥呢?
1.制作web网页游戏(但是如果代码写的不咋的游戏可能会非常卡)
2.数据可视化(这么说你可能不明白,但我告诉你echarts就是基于canvas)
3.广告banner的动态效果非常适合用canvas制作
4.canvas还可以用来内嵌一些网页
canvas基本用法
示例代码:
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
<script>
function draw() {
// 获取画布
var canvas = document.getElementById('canvas');
if (canvas.getContext) { // 用于验证浏览器是否支持canvas,它是h5的新特性,老版本ie不支持
var ctx = canvas.getContext("2d"); // 可选2d和3d
ctx.fillStyle = "rgba(200, 0, 0, 1)"; // 填充色
ctx.fillRect (10, 10, 55, 50); // 画矩形的方法,四个参数含义,前两个表示x,y坐标(相对于canvas的位置,并不是相对于窗口),从哪里开始画,后面表示长宽。
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
// 绘制一个矩形,清除特定矩形,绘制边框
ctx.fillRect(100, 100, 100, 100);
ctx.clearRect(112.5, 112.5, 75, 75); // 清除矩形
ctx.strokeRect(125, 125, 50, 50); // 矩形边框
}
}
</script>
效果如下:
canvas进阶用法
画三角形示例代码:
function draw() {
// 获取画布
var canvas = document.getElementById('canvas');
// 路径画填充三角形
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.beginPath(); // 新建一个路径,绘制指定到这个路径上
ctx.moveTo(75, 50); // 路径从哪开始
ctx.lineTo(100, 75); // 到哪个点
ctx.lineTo(100, 25);
ctx.fill(); // 填充内容区域,生成实心图
// 画描边三角形
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(150, 60);
ctx.lineTo(60, 150);
ctx.closePath(); // 路径闭合方法
ctx.stroke();
}
}
效果图如下:
画笑脸示例代码:
function draw() {
// 获取画布
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); /