canvas元素上简单绘制示例

作者: gis杭州 | 来源:发表于2019-02-18 17:43 被阅读0次

canvas元素上简单绘制示例
HTML5Canvas
HTML5 Canvas
HTML 5 Canvas
用 Flutter 的 Canvas 画点有趣的图形
HTML5新特性1（画布，媒体，地理位置，Web worker）
HTML5 - Canvas
canvas
14-JS canvas 学习
HTML5 canvas

image.png


<html>
        <head>
            <meta charset="UTF-8">
            <meta name="Generator" content="EditPlus®">
            <meta name="Author" content="Mirror">
            <meta name="Keywords" content="">
            <meta name="Description" content="">
            <title>Draw a red rectangle </title>
            <script>
                function main() {
                    //获取<canvas>标签
                    var canvas = document.getElementById("myCanvas");
                    //如果没找到<canvas>标签，则输出错误信息
                    if (!canvas) {
                        console.log('Failed to retrieve the <canvas> element.');
                        return;
                    }
        
                    //要在<canvas>上绘制图像，须先获取绘图上下文，“2d”代表我们要绘制二维图形。
                    var ctx = canvas.getContext("2d");
        
                    //fillstyle：设置或返回用于填充绘画的颜色、渐变或模式；这里我们设置填充颜色为红色。
                    ctx.fillStyle = "red";
                    /*
                       使用填充颜色填充矩形。
                       fillRect(x,y,width,height)
                       x    矩形左上角的 x 坐标
                       y    矩形左上角的 y 坐标
                       width        矩形的宽度
                       height   矩形的高度
                    */
                    ctx.fillRect(150, 210, 150, 650);
                }
            </script>
        </head>
        <!--页面加载完成后，执行JavaScript中的main()函数-->
        <body onload="main()">
            <!--定义<canvas>标签，通过width属性和height属性规定它是一片400×400的绘制区域-->
            <canvas id="myCanvas" width="400" height="400">
                <!--当浏览器不支持时，会直接忽略<canvas>标签，而直接显示下面这一行提示-->
                Please use a browser that supports "canvas".
            </canvas>
        </body>
        </html>