有趣的canvas

最近看了一本canvas的书，里面对canvas的一些基本知识讲的很详细。相比于一个div加点颜色，我臭屁的觉得使用canvas画长方形正方形圆形之类的是大才小用。
下面我放几个canvas还不错的功能点，感觉还行。
图

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function $$(id){
            return document.getElementById(id);
        }
        window.onload=function(){
            var cnv=$$("canvas");
            var cxt=cnv.getContext("2d");

            cxt.globalCompositeOperation="xor";

            cxt.fillStyle="red";
            cxt.fillRect(30,30,60,60);

            cxt.beginPath();
            cxt.arc(100,100,40,0,Math.PI*2,true);
            cxt.closePath();
            cxt.fillStyle="LightSkyBlue";
            cxt.fill();

            cxt.fillStyle="red";
            cxt.fillRect(110,30,60,60);

            cxt.fillStyle="red";
            cxt.fillRect(30,110,60,60);
            cxt.fillStyle="red";
            cxt.fillRect(110,110,60,60);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="400" height="250" style="border:1px dashed gray;"></canvas>
</body>
</html>

图

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <script>
            function $$(id){
                return document.getElementById(id);
            }
            window.onload=function(){
                var cnv=$$("canvas");
                var cxt=cnv.getContext("2d");

                var text="点击存图片";
                cxt.font="bold 60px 微软雅黑";

                cxt.shadowOffsetX=5;
                cxt.shadowOffsetY=5;
                cxt.shadowColor="#66CCFF";
                cxt.shadowBlur=10;

                cxt.fillStyle="#FF6699";
                cxt.fillText(text,10,90);

                $$("btn").onclick=function(){
                    window.location=cnv.toDataURL("image/png");
                }
                }
        </script>
        
       <canvas id="canvas" width="320" height="150" style="border:1px dashed gray"></canvas>
       <br/>
       <input id="btn" type="button" value="保存图片"/>
    </body>
</html>

当然还有canvas的边界问题等等。
by本文看书自web前端开发精品课HTML5Canvas开发详解。
by我用canvas很少，觉得就是几个API调用的问题。理解非常狭隘，求你们拍砖。

posted @ 2019-01-17 17:04 jser_dimple 阅读(256) 评论(0) 编辑收藏举报

刷新页面返回顶部