HTML5（三）canvas（1）

原創 yangwei234 2018-11-20 06:52

anvas標籤：
<canvas>
        不支持 canvas 的瀏覽器可以看到的內容
<canvas> 繪製環境：
        getContext('2d')：目前支持2d的場景
（1）繪製方塊
     fillRect(L, T, W, H)：默認顏色是黑色
     strokeRect(L, T, W, H)：帶邊框的方塊，默認1像素黑色邊框，顯示出來的不一樣
（2）設置繪圖
     fillStyle：填充顏色（繪製canvas是有順序的）
     lineWidth：線寬度，是一個數值
       strokeStyle：邊線顏色
（3）邊界繪製
     lineJoin：邊界連接點樣式—miter（默認）、round（圓角）、bevel（斜角）
     lineCap：端點樣式—butt（默認）、round（圓角）、square（高度多出爲寬一半的角）

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<style>
body{ background:black;}
#c1{ background:white;}
span{ color:white;}
</style>
<script>
window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d'); 
        oGC.fillStyle = 'red';
        oGC.strokeStyle = 'blue';
        oGC.lineWidth = 10;
        oGC.lineJoin = 'bevel';
        oGC.fillRect(50,50,100,100);
        oGC.strokeRect(50.5,50.5,100,100);
};
</script>
</head>
<body>
<canvas id="c1" width="400" height="400">
        <span>不支持canvas瀏覽器</span>
</canvas> <!--默認：寬300 高150-->
</body>
</html>

（4）繪製路徑
      beginPath：開始繪製路徑
      closePath：結束繪製路徑
      moveTo：移動到繪製的新目標點
      lineTo：新的目標點
      stroke：畫線，默認黑色
      fill：填充，默認黑色
      rect：矩形區域
      clearRect：刪除一個畫布的矩形區域
      save：保存路徑
      restore：恢復路徑

window.onload = function(){
        var oC = document.getElementById('c1');

        var oGC = oC.getContext('2d'); 
        // 開始作畫
        oGC.beginPath();
        // 起始點
        oGC.moveTo(100, 100);
        // 結束點
        oGC.lineTo(200, 200);
        // 再畫一條
        oGC.lineTo(300, 200);
        // 閉合繪圖(連接起始點和結束點)
        oGC.closePath();

        // 畫線，默認黑色
        oGC.stroke();
        // 填充，默認黑色
        oGC.fill();
};
        繪製方塊，等價於fillRect()
        oGC.beginPath();
        oGC.rect(100, 100, 100, 100);
        oGC.closePath();
        oGC.fill()
        oGC.save();
        oGC.fillStyle = 'red';
        oGC.beginPath();
        oGC.moveTo(100,100);
        oGC.lineTo(200,200);
        oGC.lineTo(300,200);
        oGC.closePath();
        oGC.fill();
        oGC.restore();

案例：
——鼠標畫線

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d'); 

        oC.onmousedown = function(ev){
                var ev = ev || window.event;
                oGC.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
                document.onmousemove = function(ev){
                        var ev = ev || window.event;
                        oGC.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
                        oGC.stroke();
                }
                document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmousedown = null;
                }
        }
};

——方塊移動

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d'); 
        var num = 0;
        oGC.fillRect(0, 0, 100, 100);

        setInterval(function() {
                num++;
                oGC.clearRect(0, 0, oC.width, oC.height);
                oGC.fillRect(num, num, 100, 100);
        }, 30);
};

（5）繪製圓
     arc(x, y, 半徑， 起始弧度， 結束弧度， 旋轉方向)
       —x，y：起始位置
       —弧度與角度的關係：弧度 = 角度 * Math.PI/180
         —旋轉方向：順時針（默認：false）、逆時針（true）

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.moveTo(200, 200);
        //弧度 = 角度*Math.PI/180
        oGC.arc(200, 200, 150, 0, 90*Math.PI/180, true);
        // 閉合
        oGC.closePath();
        // 畫線
        oGC.stroke();
};

案例
——用arc去畫鐘錶

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d'); 

        function toDraw(){
                var x = 200;
                var y = 200;
                var r = 150;

                oGC.clearRect(0, 0, oC.width, oC.height);

                var oDate = new Date();
                var oHours = oDate.getHours();
                var oMin = oDate.getMinutes();
                var oSen = oDate.getSeconds();
                // 時分秒的弧度
                var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;
                var oMinValue = (-90 + oMin*6) * Math.PI/180;
                var oSenValue = (-90 + oSen*6) * Math.PI/180;

                // oGC.moveTo(x, y);
                // oGC.arc(x, y, r, 0, 6*Math.PI/180, false);
                // oGC.moveTo(x, y);
                // oGC.arc(x, y, r, 6*Math.PI/180, 12*Math.PI/180, false);

                // 畫刻度(小分割線，60格)
                oGC.beginPath();
                for(var i=0; i<60; i++){
                        oGC.moveTo(x, y);
                        oGC.arc(x, y, r, 6*i*Math.PI/180, 6*(i+1)*Math.PI/180, false);
                }
                oGC.closePath();
                oGC.stroke();

                // 畫圓盤
                oGC.fillStyle = 'white';
                oGC.beginPath();
                oGC.moveTo(x, y);
                oGC.arc(x, y, r*19/20, 0, 360*Math.PI/180, false)
                oGC.closePath();
                oGC.fill();

                // 畫刻度(大分割線，12格)
                oGC.lineWidth = 3;
                oGC.beginPath();
                for(var i=0; i<12; i++){
                        oGC.moveTo(x, y);
                        oGC.arc(x, y, r, 30*i*Math.PI/180, 30*(i+1)*Math.PI/180, false);
                }
                oGC.closePath();
                oGC.stroke();

                // 畫圓盤
                oGC.fillStyle = 'white';
                oGC.beginPath();
                oGC.moveTo(x, y);
                oGC.arc(x, y, r*18/20, 0, 360*Math.PI/180, false)
                oGC.closePath();
                oGC.fill();

                // 或秒針、分針、時針
                // 時針
                oGC.lineWidth = 5;
                oGC.beginPath();
                oGC.moveTo(x, y);
                oGC.arc(x, y, r*10/20, oHoursValue, oHoursValue, false)
                oGC.closePath();
                oGC.stroke();
                // 分針
                oGC.lineWidth = 3;
                oGC.beginPath();
                oGC.moveTo(x, y);
                oGC.arc(x, y, r*14/20, oMinValue, oMinValue, false)
                oGC.closePath();
                oGC.stroke();

                // 秒針
                oGC.lineWidth = 1;
                oGC.beginPath();
                oGC.moveTo(x, y);
                oGC.arc(x, y, r*18/20, oSenValue, oSenValue, false)
                oGC.closePath();
                oGC.stroke();
        }
        setInterval(function(){
                toDraw();
        }, 1000);       
};

（6）繪製其他曲線
   arcTo(x1, y1, x2, y2, r)：第一組座標，第二組座標，半徑

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.moveTo(100,200);
        oGC.arcTo(100,100,200,100,50);
        oGC.stroke();
}

   quadraticCurveTo(dx, dy, x1, y1)：貝塞爾曲線——第一組控制點，第二組結束座標

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.moveTo(100,200);
        quadraticCurveTo(100,100,200,100);
        oGC.stroke();
}

   bezierCurveTo(dx1, dy1, dx2, dy2, x1, y1)：貝塞爾曲線——第一組控制點，第二組控制點，第三組結束座標

window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.moveTo(100,200);
        oGC.bezierCurveTo(100,100,200,200,200,100);
        oGC.stroke();

}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML5 canvas組件

canvas簡介 canvas標籤是用來繪製圖像的 canvas本身沒有繪畫的能力，僅僅是圖形的容器，相當於一塊畫板 必須要使用腳本完成繪製：JS canvas繪畫 <!DOCTYPE html> <html lang="

OliGit 2020-07-08 12:27:30

vue開發的手機購物商城APP東京大藥房(帶數據庫，定位，支付，等)

源碼下載就能上線,需要的注注,私信,

qq_36824777 2020-07-08 11:50:38

Javascript基礎知識體系化學習總結（九）存儲

Javascript基礎知識體系化學習總結（九）存儲 一、cookie 1.本身是由於瀏覽器和服務端的通信，被用來做存儲。 2.既然是借用的，那麼會存在一些問題如： 儲存量小僅僅是4K； 必須http請求時需要發送到服務器端，增加

ODST_TheSolverO5 2020-07-08 10:59:37

web前端複習第七課

                                           二級導航實例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

思丰百年 2020-07-08 10:46:31

判斷中轉頁面入口window.performance.navigation.type

本文轉載自：https://blog.csdn.net/zhouziyu2011/article/details/70673123   今天遇到一個問題 A---------中轉頁面----------B 中轉頁面如何知道自己是從A跳過來

lijia_1983370657 2020-07-08 10:05:05

HTML+css做炫酷的3d盒子反轉

3d盒子反戰 效果如圖如下： HTML重要的代碼如下： <ul> <li> <div class="box"> <div class="front">目錄

文情战 2020-07-08 09:12:55

DiveIntoHTML5翻譯(2)——檢測HTML5特性

此篇爲片段翻譯，爲Dive into HTML5系列文章的第三篇，第二篇A Quite Biased History of HTML5 跳過 DETECTING HTML5 FEATURES DETECTION TECHNIQUE

Reactor1379 2020-07-08 09:05:25

HTML5 03 Canvas介紹

<!doctype html> <html> <head></head> <body> <canvas width="500" height="800" style="background:yellow" id="canvas"

xinyuan_he 2020-07-08 08:58:18

HTML5 05 Canvas實例 鬧鐘

<!doctype html> <html> <head></head> <body> <canvas id="clock" width="500" height="500"> 您的瀏覽器不支持canvas標籤，無法看到時鐘

xinyuan_he 2020-07-08 08:58:18

HTML5 04 表單

<!doctype html> <html> <head></head> <body> <form action="http://localhost/test.php" method="post" id="register"></

xinyuan_he 2020-07-08 08:58:18

HTML5 02 音視頻介紹

<!doctype html> <html> <head></head> <body> <!--<video src="movie.webm" controls="controls"> 您的破瀏覽器都是古董早該換了，不然休想

xinyuan_he 2020-07-08 08:58:06

初始HTML靜態頁面------簡單總結！

一，HTML是什麼 1，什麼是HTML？ 超文本標籤語言 什麼是超文本？ 文字，圖片，視頻，音頻，程序，鏈接… 問：html本身是純文本還是超文本？ 答：本身是純文本 二，HTML的基本語法 1，HTML的基本骨架

心为雅好为平 2020-07-08 08:18:48

HTML5之啓動篇-檢測瀏覽器是否支持HTML5與第一個H5程序

通過編寫javaScript瞭解瀏覽器是否支持HTML5與第一次編寫HTML5 的Hello world程序 //觸發標準模式 <!DOCTYPE html> <html> <head> //charset=gb2312 字符

飘雨树 2020-07-08 07:38:48

Egret圖文混排組件

/** * 圖文混排組件 */ class TextImage extends eui.Group { public templet: egret.TextField c

pilihou 2020-07-08 05:52:56

springboot+idea+bootstrap的前臺顯示圖片

接我原來寫的那個圖片上傳，現在寫一下如何在前臺顯示圖片 1、因爲上面是存儲的絕對路徑如下圖，springboot 顯示圖片的話是需要配置application.properties，下面貼出來 application.prope

你的孤独，虽败犹荣 2020-07-08 05:51:59