h5 canvas 畫圖

時間 2019-11-19

標籤 h5 canvas 畫圖简体版

原文原文鏈接

h5 canvas 畫圖javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        $().ready(function () {
            var $c=$("#cans");
            $c.bind('mousemove', function (event) {
                var x=event.clientX;
                var y=event.clientY;
                $("#res").text("座標：x軸"+x+"座標：y軸"+y);
            });
            // 畫矩形
            var d=$c.get(0).getContext("2d");  //2d
            d.fillStyle="red";    //顏色
            d.fillRect(0,0,100,100); // 矩形
            d.fillStyle="rgba(0,0,255,0.5)";  //最後一個是程春明度
            d.fillRect(200,0,100,100);
//            畫線
            d.moveTo(110,110); //起始位置
            d.lineTo(130,130); //終止位置
            d.lineTo(155,120); // 若是沒有再次設置起始位置則從終止位置繼續畫
            d.stroke(); // 結束圖形
//            圓
            d.fillStyle="blue";
            d.beginPath(); // 重新開始畫，防止 衝突重疊
            d.arc(100,200,30,0,Math.PI*2,true); // x y 座標 半徑30
            d.closePath(); // 結束畫布，防止衝突重疊
            d.fill(); // 結束渲染
//            顏色漸變
            var grd= d.createLinearGradient(250,250,375,250); // 顏色漸變的起始和終止座標
            grd.addColorStop(0,'red'); // 0 表示起點  0.1 0.2.。。1 表示終點
            grd.addColorStop(0.8,'green');
            grd.addColorStop(1,'blue');

            d.fillStyle=grd;
            d.fillRect(250,250,375,250);  // 設置色塊
//            載入圖形  
            var img=new Image()
            img.src="../img/logo.png"

             //等圖像 加載完畢，再繪製圖像
            img.onload= function () {

              //d.drawImage(img,200,30);   // 加載圖片

              // 背景圖片平鋪
                var pattern = d.createPattern(img, "repeat");
             //二、將返回值設置給fillStyle屬性
                d.fillStyle = pattern;
              //三、填充矩形
                d.fillRect(0, 0, 400, 300);
         }

                //切割圖像
                d.beginPath();
                d.arc(150,150,50,0,Math.PI * 2 , true);
                d.closePath();
                d.clip();

 }); </script> </head> <body> <canvas id="cans" width="500" height="500">瀏覽器不支持canvas</canvas> <div id="res"></div> </body> </html>

h5畫圖補充html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day04 pm 完</title>
    <style>

    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $().ready(function () {
            var can=$("#canvas").get(0);   //轉成 dom 操做
            d=can.getContext("2d");
            d.fillStyle="red";    //填充顏色
            d.strokeStyle='green'; // 線條顏色
            d.strokeRect(50,50,100,100);  //邊框矩形
            d.fillRect(60,60,80,80); // 實心矩形
            d.clearRect(70,70,60,60);  //擦除矩形

        // 封閉的三角形
            d.beginPath();        // 添加  beginPath() closePath() 就能夠造成封閉圖形
            d.moveTo(110,110); //起始位置
            d.lineTo(130,130); //終止位置
            d.lineTo(155,120); // 若是沒有再次設置起始位置則從終止位置繼續畫

            d.closePath();
            d.fillStyle="blue";
            d.stroke(); // 結束圖形
            d.fill();
        //  左半圓
            d.fillStyle="green";
            d.beginPath(); // 重新開始畫，防止 衝突重疊
            d.arc(100,200,30,Math.PI/2,Math.PI*3/2,false);
            // x y 座標 半徑30 位置 上 PI*3/2 右 0 / 2PI  下 pi/2 左 pi  true false表示順時針或逆時針
            d.closePath(); // 結束畫布，防止衝突重疊
            d.fill(); // 結束渲染
            //任意矩形
            $("#btn").click(function () {
                var x=parseInt(Math.random()*500);
                var y=parseInt(Math.random()*400);
                d.fillRect(x,y,100,100);
            });
            // 縮放
            $("#btnScale").click(function () {
                d.scale(1.2,1.2);  //放大1.2倍 要再畫矩形纔有效果
//                d.translate(100,100);
//                d.save(); // 保存擴大縮小等的狀態
//                d.restore(); //  恢復狀態
            });
        });


    </script>
</head>
<body>
    <canvas id="canvas" width="800" height="500" style="border:1px solid green;">
        不支持 canvas
    </canvas>
    <br>
    <button type="button" id="btn">button</button>
    <button type="button" id="btnScale">btnScale</button>
</body>
</html>

html5繪製文字html5

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            var canvas = $("#canvas").get(0);
            var d = canvas.getContext("2d");
            d.lineWidth=1;
            d.strokeStyle='green';
            d.font = "bold 24px 微軟雅黑";
            d.strokeText("你好,世界!",20,20);   //空心文字輪廓
            d.fillText("你好,世界!",125,125);   // 文字
            //陰影文字

            d.shadowColor="red";  //陰影
            d.shadowOffsetX=5;      // 偏移
            d.shadowOffsetY=5;      //
            d.shadowBlur=5;          // 陰影模糊效果
            d.font = "bold 24px 微軟雅黑";
            d.fillText("微軟雅黑!",35,50);
      });
    </script>
</head>
<body>
<canvas id="canvas" width="800" height="300"></canvas>
</body>
</html>

html5 線條粗細張條線冒java

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            var canvas=$("#canvas").get(0);
            var d=canvas.getContext("2d");
            //線條粗細  lineWidth:1
            // 線條線冒： lineCap:butt round square
            d.lineWidth=6;     // 線條粗細
            d.lineCap='round';   //頭尾圓角
            //d.lineJoin='round';  // 線條鏈接處圓角
            d.lineJoin='miter';   //  兩條線造成的銳角長度，默認爲10
            d.miterLimit=8;
            d.strokeStyle='green';
            d.moveTo(110,110); //起始位置
            d.lineTo(150,150); //終止位置
            d.lineTo(125,100); // 若是沒有再次設置起始位置則從終止位置繼續畫
            d.stroke(); // 結束圖形
        });
    </script>
</head>
<body>
<canvas id="canvas" ></canvas>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。