H5高级 利用canvas 画布画图

画五角星

<canvas id="can" width="800" height="600" style="border:solid red"></canvas>           

//获取画布
      var can = document.getElementById("can");
        if (can.getContext) {
            var ctx = can.getContext("2d");
            ctx.linWidth = 10;
            ctx.lineJoin = "round";
            //颜色
            ctx.fillStyle = "red";
           //起点
           draw(100,100)    
        }
        //封装方法
        function draw(x, y) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x - 10, y + 25);
            ctx.lineTo(x - 36, y + 25);
            ctx.lineTo(x - 13, y + 40);
            ctx.lineTo(x - 25, y + 65);
            ctx.lineTo(x, y + 50);
            ctx.lineTo(x + 25, y + 65);
            ctx.lineTo(x + 13, y + 40);
            ctx.lineTo(x + 36, y + 25);
            ctx.lineTo(x + 10, y + 25);
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
        }           

画太极

<canvas id="can" width="800" height="600"></canvas>           

<script>
        var cvs = document.getElementById("can");
        if (cvs.getContext) {
            var ctx = cvs.getContext("2d");
            draw(400,200)
        }
        function draw(x, y) {
            radius = 150;
            //绘制圆形
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI, false)
            ctx.stroke();
            //绘制黑鱼
            ctx.fillStyle = "black";
            ctx.beginPath();
            ctx.moveTo(x, y - radius);
            ctx.bezierCurveTo(x - radius, y - radius / 2, x + radius, y + radius / 2, x, y + radius);
            ctx.arc(x, y, radius,-(Math.PI / 180) * 270, (Math.PI / 180) * 270, true);
            ctx.closePath();
            ctx.fill();
            //绘制鱼眼
            ctx.beginPath();
            ctx.arc(x, y + radius / 2, 20, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.arc(x, y - radius / 2, 20, 0, 2 * Math.PI, false);
            ctx.fill();
        }
    </script>           

米老鼠

<script type="text/javascript">
        //获取画布
        var can = document.querySelector("#can");
        if (can.getContext) {
            //获得上下文渲染
            var xuan = can.getContext("2d");
            //脸
            xuan.beginPath();
            xuan.fillStyle = "blue";
            xuan.arc(500, 300, 120, 0, Math.PI * 2, false);
            xuan.stroke();
            xuan.fill();
            //耳朵
            xuan.beginPath();
            xuan.fillStyle = "yellow";
            xuan.arc(400, 210, 50, 0, Math.PI * 2, false);
            xuan.stroke();
            xuan.fill();
            xuan.beginPath();
            xuan.fillStyle = "yellow";
            xuan.arc(600, 210, 50, 0, Math.PI * 2, false);
            xuan.stroke();
            xuan.fill();
            //眼睛
            xuan.beginPath();
            xuan.fillStyle = "red";
            xuan.arc(450, 280, 20, 0, Math.PI * 2, false);
            xuan.stroke();
            xuan.fill();
            xuan.beginPath();
            xuan.fillStyle = "red";
            xuan.arc(550, 280, 20, 0, Math.PI * 2, false);
            xuan.stroke();
            xuan.fill();
            //鼻子
            xuan.beginPath();
            xuan.fillStyle = "red";
            xuan.arc(500, 330, 20, 0, Math.PI * 2, false);
            xuan.stroke();
            xuan.fill();
            //嘴巴
            xuan.beginPath();
            xuan.fillStyle = "red";
            xuan.arc(500, 365, 40, 0, Math.PI, false);
            xuan.stroke();
            xuan.fill();
        }
</script>