一个简单的canvas案例

标签: canvas

canvas的流程:

1.检测widow是否加载完成

2.检测是否支持canvas,有3种方法,案例用第3种:使用引入modernizr.js,到官网www.modernizr.com下载

3.创建画布实例,获取2D上下文

4.drawScreen()

5.标签元素<canvas id="canvas" width="500" height="400"> ...</canvas>

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //方法一:
        // if(!theCanvas || !theCanvas.getContext){
        //     return
        // }
        //方法二
        // function canvasSupport(){
        //     return !!document.createElement('testcanvas').getContext;
        // }
        // function canvasApp(){
        //     if(!canvasSupport){
        //         return;
        //     }
        // }
        //方法三 使用引入modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                context.fillStyle = "#aaaaaa"; //设置或返回用于填充绘画的颜色、渐变或模式
                context.fillRect(0, 0, 200, 200); //绘制“被填充”的矩形
                context.fillStyle = "red"; //设置或返回用于填充绘画的颜色、渐变或模式 
                context.font = '20px _sans'; //设置或返回文本内容的当前字体属性
                context.textBaseline = 'top'; //设置或返回在绘制文本时使用的当前文本基线
                context.fillText("Hello Canvas!", 0, 0) //在画布上绘制“被填充的”文本
            }
        }
    </script>
</head>

<body>
    <div style="position: absolute;top:50px;left: 50px; z-index: 10;">
        <canvas id="canvas" width="500" height="400">
                Your browser does not support the canvas element.
        </canvas>
    </div>

</body>

</html>

版权声明:本文为weixin_42659625原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42659625/article/details/82621506