這篇文章主要介紹“html canvas怎么使用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“html canvas怎么使用”文章能幫助大家解決問題。

目前創(chuàng)新互聯(lián)已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站運營、企業(yè)網(wǎng)站設(shè)計、秀洲網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

canvas ：可以理解為一個div，作用是一塊畫板

如果想要使用canvas，需要創(chuàng)建一個“畫家”。生成畫家的方法：

var huaban = document.querySelector('.canvas');//畫板
var bicaso = huaban.getContext('2d');//畫家  canvas上下文對象
//繪畫操作  
//表示在距離畫板左上10px 10px的位置畫了一個長寬分別為50px的矩形，默認(rèn)填充顏色黑色  繪制矩形
bicaso.fillRect(10,10,50,50);
//表示繪制輪廓線
bicaso.strokeRect(10,10,50,50);
//繪制畫筆顏色
bicaso.fillStyle='顏色';
//擦除矩形方法
bicaso.clearRect(x,y,要擦除的矩形寬度，要擦除的矩形高度);

Transparency(透明度)

globalAlpha = transparencyValue: 這個屬性影響到 canvas 里所有圖形的透明度，有效的值范圍是 0.0 （完全透明）到 1.0（完全不透明），默認(rèn)是 1.0。

globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時候相當(dāng)高效。不過，我認(rèn)為使用rgba()設(shè)置透明度更加好一些。

canvas基礎(chǔ)demo

    
    
    
    


    

    
    
        
        
        您的瀏覽器不支持canvas，請更新或更換瀏覽器。
    

    您的瀏覽器不支持canvas

    您的瀏覽器不支持canvas
    


    

關(guān)于“html canvas怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。