前端装逼必备--Canvas

最新推荐文章于 2024-05-10 10:10:22 发布

m0_67391518

最新推荐文章于 2024-05-10 10:10:22 发布

阅读量1k

点赞数 4

分类专栏：前端 html 文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/m0_67391518/article/details/123377069

版权

如果写代码不是为了装逼，那人生将毫无意义。都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();

最低0.47元/天解锁文章

m0_67391518

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端装逼必备--Canvas

如果写代码不是为了装逼，那人生将毫无意义。都2020年了，如果你从事前端开发，连canvas都不会用，那你拿啥去装逼？下面跟着笔者一起来看看canvas是啥，可以用来做啥，有哪些产品是canvas做出来的。Canvas介绍1.canvas是html5的一个新标签，属于h5的新特性2.canvas标签是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo3.它是通过javascript来画的，即脚本绘制图形canvas可以用来干啥呢？1.制作web
复制链接

扫一扫