html5之canvas

ygyooo 發布于2019-08-29 10:56 / 1707人閱讀

摘要：是出現的新標簽，主要用來畫圖，看見網上能用來實現各種圖形，所以感覺很好玩，就學習了一下。

canvas是html5出現的新標簽，主要用來畫圖，看見網上能用來實現各種圖形，所以感覺很好玩，就學習了一下。
canvas繪制圖形有兩種方法：

context.fill() //填充

context.stroke() //繪制邊框

在繪制圖形前要設置好圖形樣式，也有兩種方法：

context.fillStyle() //填充的樣式

context.strokeStyle() //邊框樣式

下面就開始繪制各種圖形

繪制矩形
context.fillRect(x,y,width,height)
context.fillRect(x,y,width,height)
x : 矩形的起點橫坐標
y : 矩形的起點縱坐標
width : 矩形的寬度

function draw(){
        var canvas = document.getElementById("chen"),
            context = canvas.getContext("2d");
            canvas.width = 100;
            canvas.height = 100;
            context.fillStyle = "red";        //發現要先設置填充顏色
            context.fillRect(0, 0, 100 ,100);
            context.strokeRect(0, 100, 100 ,100);
            
    }
 draw();

圓
context.arc(x,y,radius,starAngle,endAngle, anticlockwose)
radius : 半徑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111313.html

html5之canvas

摘要：是新加的標簽，主要有和，的應用是動畫和圖像，的應用是游戲渲染。 HTML5 Canvas canvas是html5新加的標簽，主要有2D和3D，2D的應用是動畫和圖像，3D的應用是游戲渲染。 1. 2D基礎 1.1繪制線 canvas window.onload = function(){ ...

蘇丹 2019-08-26 13:43 評論0 收藏0
html5之canvas

摘要：是出現的新標簽，主要用來畫圖，看見網上能用來實現各種圖形，所以感覺很好玩，就學習了一下。 canvas是html5出現的新標簽，主要用來畫圖，看見網上能用來實現各種圖形，所以感覺很好玩，就學習了一下。canvas繪制圖形有兩種方法： context.fill() //填充 context.stroke() //繪制邊框在繪制圖形...

TalkingData 2019-08-19 18:42 評論0 收藏0