canvas繪製形狀

1.1 繪製形狀

1.1.1 繪製矩形

ctx.rect（startx, starty, width, height）;

ctx.strokerect（startx, starty, width, height）;

ctx.fillrect（startx, starty, width, height）;

ctx.clearrect（startx, starty, width, height）;

案例

利用繪製圖形與清除矩形區域, 可以實現簡單的動畫. 例如**:

... var x = 10, y = 10, oldx = 10, oldy = 10;

var width = 100, height = 50;

var intervalid = setinterval(function ()

}, 20);

簡單效果

有時為了簡單常常將整個畫布都清除, 這樣就不用每次計算清除的問題.

ctx.clearrect( 0, 0, cas.width, cas.height );

// 也可以設定畫布寬度, 這樣就會自動清除

cas.width = cas.width;

1.2.1 繪製圓弧

1.2.1.1 繪製圓弧

注意：要用弧度，不能用角度

ctx.arc(圓心的x座標，圓心的y座標，圓的半徑，圓的開始弧度，圓的結束弧度)

1.2.1.2 繪製扇形

繪製扇形的重點是需要設定起始位置為圓心點，然後閉合路徑即可

//把角度轉換為弧度

function angletoradian( angle )

...ctx.moveto(100,100)；

ctx.arc(100,100,0,angletoradian(90));

ctx.closepath();

ctx.fill();

HTML5 Canvas繪製簡單形狀

使用canvas來進行繪畫，它像很多其他dom物件一樣，有很多屬性和方法，操作這些方法，實現繪畫 獲取canvas物件，呼叫document.getelementbyid 方法 呼叫canvas物件的getcontext 方法，獲取context物件，引數 string的 2d 繪製線段 呼叫con...

HTML5 Canvas繪製簡單形狀

使用canvas來進行繪畫，它像很多其他dom物件一樣，有很多屬性和方法，操作這些方法，實現繪畫 獲取canvas物件，呼叫document.getelementbyid 方法 呼叫canvas物件的getcontext 方法，獲取context物件，引數 string的 2d 繪製線段 呼叫con...

2018 12 6形狀繪製

import cv2 import numpy as np newimageinfo 500 500,3 元組 dst np.zeros newimageinfo,np.uint8 line 繪製線段 1 dst 目標資料 2 begin 線段繪製的起始位置 3 end 線段繪製的終止位置 4 co...