一起学习canvas吧

原创

我不是药神 2022-08-18 21:13:53 ©著作权

文章标签 2d 前端开发浏览器兼容 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者我不是药神的原创作品，请联系作者获取转载授权，否则将追究法律责任

作为前端家族最有画面感的canvas，相信大家都熟悉。但由于平时业务上没有使用过，所以很少学习相关知识。今天就记录下canvas的学习过程。

canvas 简介

首先从自身角度讲述下对canvas的理解。canvas更多是带来了前端开发人员对图像的处理能力，同时也允许丰富的2D图形创作。配合JavaScript可以做出简单的动画。即使简单的来看,我们也可以用来创作图形和表格。这极大丰富了我们对设计师原型上的体验提升。而且学习成本比学习新语言要低得多。

canvas 核心概念

canvas常被与img标签类比,区别在于它没有src和alt属性。只有width和height是必选属性，当然还有其他一些可以选添的，后面学完后会在完善下这里的介绍。此外，我理解核心概念只有画布、画笔。分别是canvas和getContext。我们如果把canvas想象成画布的话，那getContext("2d")获得的对象就可以比喻成画笔。然后我们用这个画笔去绘制fillRect长方形，再用fillStyle做染料填色。这样我们今天就简单的完成了长方形的绘制。具体代码可看下方实现。

使用canvas画长方形

<html>
    <head>
        <canvas id="yaoshen" width="900" height="800"></canvas>
    </head>
    <body onload="drawRect();">
        <script type="application/javascript">
            function drawRect() {
                var canvas = document.getElementById("yaoshen");
                if (canvas.getContext) {  // 防止浏览器兼容问题
                    var ctx = canvas.getContext("2d");

                    ctx.fillStyle = "rgb(0,0,200)";
                    ctx.fillRect (100, 100, 550, 500);

                    ctx.fillStyle = "rgba(0, 200, 0)";
                    ctx.fillRect (300, 300, 550, 500);
                }
            }
        </script>
    </body>

</html>