HTML5-Canvas


 

<!DOCTYPE html>
<html class="no-js">

    <head>
        <meta charset="utf-8">
        <title>HTML5-Canvas</title>
        <script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>

        <canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">
            Your browser does not support the canvas element.
        </canvas>

        <script type="text/javascript">
            /*
             * 详细说明 :http://www.cnblogs.com/cotton/p/4403042.html
             */
            var c = document.getElementById("myCanvas");
            var cxt = c.getContext("2d");

            function line() {
                cxt.moveTo(10, 10);//为指定点创建了一个新的子路径,可以看成用来定位绘图鼠标用的(直线的起点,因为所有画线都和它相关,我们称之为上下文点)。
                cxt.lineTo(100, 50); //从鼠标定位点,到方法参数中指定的点之间画一条直线
                cxt.lineTo(10, 50);
                cxt.stroke();//为所画的线赋予颜色,并使其可见。如果没有特别的指定颜色的话,则默认使用黑色画直线。    
            }

            function arc() {
                cxt.fillStyle = "#FF0000";
                cxt.beginPath();//定义了一个新的路径绘制动作的开始
                cxt.arc(120, 20, 15, Math.PI, Math.PI * 2, true);//圆心坐标(x,y),半径,弧度起始点,结束点,画弧方向(true-顺时针,false-逆时针)
                cxt.closePath();
                cxt.fill();
            }

            function LinearGradient() {
                var grd = cxt.createLinearGradient(0, 0, 175, 50);//渐变路径的起始坐标和结束坐标(简单理解就是画了一条直线)
                grd.addColorStop(0, "#FF0000");//函数名字面意思是增加颜色停止点,就是把刚画的渐变路径定义为1,p是所在路径的位置(0-1之间),c则是渐变到p时候的颜色值。
                grd.addColorStop(1, "#00FF00");
                cxt.fillStyle = grd;
                cxt.fillRect(0, 55, 175, 50);
            }

            function drawImg() {
                var img = new Image()
                img.src = "http://w3school.com.cn/i/ct_html5_canvas_image.gif"
                cxt.drawImage(img, 0, 110);//图片及起始坐标
            }
        </script>

        <input type="button" value="直线" onclick="line()" />
        <input type="button" value="弧" onclick="arc()" />
        <input type="button" value="渐变" onclick="LinearGradient()" />
        <input type="button" value="图" onclick="drawImg()" />
    </body>

</html>

 


 

posted @ 2015-04-26 14:19 Mr.Leo 阅读(...) 评论(...) 编辑 收藏