HTML5-Canvas

時間 2019-11-11
標籤 html5 html canvas 欄目 HTML5 简体版
原文原文鏈接
<!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>
相關標籤/搜索
html5canvas
HTML
HTML5
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。