HTML5 Canvas的基本用法介紹

這篇文章帶給大家的內容是關於HTML5 Canvas的基本用法介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

canvas 是 HTML5 當中我最喜歡的所有新功能中我最喜歡的一個標籤了。因為它太強大了，各種有趣的特效都可以實現。

1. canvas 的基本使用方法

- 它是行內塊元素
- 預設大小是300 x 150，不能在css 裡給他設定樣式，只能在標籤內寫它的屬性。如 width = 400，height = 300
- 取得畫布
   var canvas = document。 querySelector("canvas")
- 取得畫筆(上下文)
   var ctx = canvas.getContext('2d')    

#2. canvas 繪製基本的圖形

填滿矩形
ctx.fillRect(0,0,100,100)
fill：跟填滿有關
Rect: 描繪一個矩形

填滿圖形設定樣式
ctx.fillStyle = 'green'

描邊矩形
ctx.strokeRect(100,100,100,100)

描邊圖形設定樣式
ctx.strokeStyle = 'white'
ctx.lineWidth = 100

清除整個畫布
ctx.clearRect(0,0,canvas.width,canvas.height)

畫線段
ctx.moveTo(100,100)
ctx.lineTo(100,100 )

描邊
ctx.stroke()

填入
ctx.fill()-

起始點與結束點連結
ctx. closePath()
ctx.save()開頭
   ......
ctx.restore()結尾

3. 畫布時鐘

使用畫布我們可以畫一個時鐘，包括刻度和時針，每一秒走的刻度可以用Data 物件透過計時器來時時更新。

var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    function move() {
        ctx.save()
            ctx.translate(300,300)
            //  初始化一些公共的样式
            ctx.lineCap = 'round'
            ctx.strokeStyle = 'black'
            ctx.lineWidth = 8
            ctx.scale(0.5,0.5)

            // 画外面的圆
            ctx.save();
                ctx.beginPath();
                ctx.strokeStyle = 'gold';
                ctx.arc(0,0,150,0,2*Math.PI);
                ctx.stroke();
            ctx.restore();

            // 画里面的刻度
            ctx.save()
                ctx.beginPath();
                for (var i=0; i <p>靜止的圖像如下圖。 </p><p style="text-align: center;"><span class="img-wrap"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/207/367/164/1542961926883406.png?x-oss-process=image/resize,p_40" class="lazy" title="1542961926883406.png" alt="HTML5 Canvas的基本用法介紹"></span></p><h4 id="刮刮卡效果">刮刮卡效果</h4><p>使用 canvas 的圖形合成的屬性可以實現圖片合成的效果。具體應用於刮刮卡。 <br>globalCompositeOperation屬性設定或傳回如何將一個來源（新的）影像繪製到目標（已有）的影像上<br>來源影像= 您打算放置到畫布上的繪圖<br>目標影像= 您已經放置畫布上的繪圖</p><p   style="max-width:90%"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/360/936/462/1542961942862890.png?x-oss-process=image/resize,p_40" class="lazy" title="1542961942862890.png" alt="HTML5 Canvas的基本用法介紹"></p><pre class="brush:php;toolbar:false">var  canvas = document.querySelector("canvas")
    var ctx = getCtx()
    log(ctx)
    ctx.fillStyle = 'yellow'
    ctx.fillRect(0,0,400,400)

    ctx.globalCompositeOperation = 'destination-out';

    // 鼠标按下
    canvas.onmousedown = function (event) {
        ctx.beginPath()
        ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,
            20,0,2*Math.PI)
        ctx.fill()
        // 鼠标移动
        document.onmousemove = function (event) {
            ctx.beginPath()
            ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,
            20,0,2*Math.PI)
            ctx.fill()
        }

        // 鼠标抬起
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null
        }
        return false
    }

以上是HTML5 Canvas的基本用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！