Html5-画布（canvas）之常用绘图方法介绍

最新推荐文章于 2024-04-08 19:19:50 发布

前端独秀

最新推荐文章于 2024-04-08 19:19:50 发布

阅读量320

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=jiiia0h0j&title=Html5-%E7%94%BB%E5%B8%83%EF%BC%88canvas%EF%BC%89%E4%B9%8B%E5%B8%B8%E7%94%A8%E7%BB%98%E5%9B%BE%E6%96%B9%E6%B3%95%E4%BB%8B%E7%BB%8D

版权

前端专栏收录该内容

493 篇文章 3 订阅

订阅专栏

画布 Demo | canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
canvas/demo.html

<!DOCTYPE HTML>
<html>
<head>
    <title>画布 Demo</title>
</head>
<body>
    <canvas id="canvas" width="320" height="240" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br/>
    <button type="button" onclick="demo();">Demo</button>

    <br />
    <img id="img" alt="" src="" />

    <script type="text/javascript">

        var canvas = document.getElementById('canvas')
        if (canvas.getContext) {
            alert("您的浏览器支持 canvas 标签");
        } else {
            alert("您的浏览器不支持 canvas 标签");
        }

        /*
         * canvas 标签 - 画布标签
         *   getContext("2d") - 获取画布标签上的 2D 上下文对象（CanvasRenderingContext2D 对象）
         *   width - 画布的宽
         *   height - 画布的高
         *   canvas.toDataURL(type) - 返回画布数据，默认类型为 image/png
         *     type - 指定返回画布数据的类型，比如可以指定为 image/jpeg，默认类型为 image/png
         *
         * CanvasRenderingContext2D - 画布的 2D 上下文对象，其拥有多种绘制图像的方法
         *   canvas - 上下文所对应的画布
         */

        var ctx = canvas.getContext('2d');
        alert(ctx.canvas.id);

        function demo() {

            ctx.fillRect(20, 20, 100, 100);

            alert("width: "   canvas.width.toString());
            alert("height: "   canvas.height.toString());

            alert(canvas.toDataURL("image/jpeg"));
            alert(canvas.toDataURL()); // image/png
            document.getElementById("img").src = canvas.toDataURL();

        }

    </script>
</body>
</html>