1.canvas矩形的繪製以及線的繪製

阿新 • • 發佈：2019-01-17

1.Canvas矩形以及線的API

Canvas的API提供瞭如下三個方法：

方法	簡介
clearRect(double x,double y,double w,double h)	該方法是清除座標(x,y)的寬為w，高為h的矩形。
strokeRect(double x,double y,double w,double h)	該方法是在座標(x,y)畫出寬為w，高為h的矩形，並且描邊。 w，h也可以是0，結果會是一條直線。
fillRect(double x,double y,double w,double h)	該方法是在座標(x,y)畫出寬為w，高為h的矩形，並且填充。 w，h也可以是0，結果會是一條直線。
rect(double x,double y,double w,double h)	該方法是在座標(x,y)畫出寬為w，高為h的矩形，但是不會填充也不會描邊。

如果是預設情況下，繪製出來的矩形是尖角的，可以通過lineJoin設定。
下面介紹線的一些API：

方法	簡介
moveTo(x,y)	生成一條子路徑，繪製線的點
lineTo(x,y)	如果當前沒有子路徑，那麼它就和moveTo()方法一樣。如果它已經有了子路徑，那麼它會繪製一個點，並且加入子路徑。
lineCap	該方法告訴瀏覽器如何繪製線段的端點，可以選擇的值有： butt round square 預設值的是butt。
lineWidth	該值決定值的寬度，但是必須非負。
lineJoin	該值決定兩條直線先交的交點樣式，可取的值是 bevel(三角形) round(圓點) miter(正方形) 預設是miter。
miterLimit	斜接線長度與二分之一線寬的比值。如果斜接線的長度超過了該值，瀏覽器就會以bevel方式來繪製線段的連線點。型別：double，預設值：10.0
quadraticCurveTo(double cpx, double cpy, double x, double y)	建立一條表示二次方貝貝塞爾曲線的路徑。該方法需要傳入兩個點，第一個點是曲線控制點，第二個是錨點。
bezierCurveTo(double cpx, double cpy, double cp2x, double cp2y , double x, double y)	建立一條代表三次方貝賽爾曲線的路徑。你需要像該方法傳入三個點的座標，前兩點是該曲線的控制點，最後一個點是錨點。

關於lineJoin的3個屬性，效果如下:

例項程式碼如下：

<script>

var canvas = document.getElementById('canvas'),

        context = canvas.getContext('2d');

    context.beginPath();

    context.fillStyle = "white";

    context.font = '24px Helvetica';

    context.fillText('miter',100,20);

    context.strokeStyle = "white";

    context.lineWidth = "40";

    context.lineJoin = "miter";

    context.moveTo(60,60);

    context.lineTo(180,60);

    context.lineTo(180,180);

    context.stroke();

    context.lineJoin = "round";

    context.fillText('round',280,20);

    context.moveTo(240,60);

    context.lineTo(360,60);

    context.lineTo(360,180);

    context.stroke();

    context.lineJoin = "bevel";

    context.fillText('bevel',460,20);

    context.moveTo(420,60);

    context.lineTo(540,60);

    context.lineTo(540,180);

    context.stroke();

    </script>

1.canvas矩形的繪製以及線的繪製

1.Canvas矩形以及線的API Canvas的API提供瞭如下三個方法：方法簡介 clearRect(double x,double y,double w,double h)

1. Canvas繪製基礎圖形

Canvas是在web畫面中繪製點陣圖的技術。步驟： 1.取得Canvas物件。（相當於畫布） 2.從Canvas物件中獲取繪圖用的上下文。（相當於繪畫用的筆） 3.使用上下文中的方法和屬性進行繪圖。 1.簡單例子： <style type="text/

canvas 繪製雙線技巧

楔子最近一個專案，需要繪製雙線的效果，雙線效果表示的是軌道（類似鐵軌之類的），如下圖所示：負責這塊功能開發的小夥，姑且稱之為L吧，最開始是通過數學計算的方式來實現這種雙線，也就是在原來的路徑的基礎上，計算出兩條路徑。但是這個過程的計算算挺複雜，而是最終實現的效果很耗效能，效能損耗估計主要在於路徑的計算

1. Canvas繪製基礎圖形

Canvas是在web畫面中繪製點陣圖的技術。步驟： 1.取得Canvas物件。（相當於畫布） 2.從Canvas物件中獲取繪圖用的上下文。（相當於繪畫用的筆） 3.使用上下文中的方法和屬性進行繪圖。 1.簡單例子： <style type="text/cs

OpenCv學習筆記(七)---OpenCv中的基本繪圖函式,圓，橢圓，線段，矩形，多邊形的繪製(1)

(一)本節教程的目的本節你將學到: 1--如何使用Point在影象中定義2D點 2--如何以及為何使用Scalar 3--用OpenCv的函式Line繪直線 4--用OpenCvd的函式ellipse繪製橢圓 5--用OpenCv的函式rectangle繪矩形

使用matplotlib繪製K線圖以及和成交量的組合圖

matplotlib提供了一些金融圖表主要用於視覺化歷史股票價格,或者類似的金融時間序列資料在matplotlib.finance的子庫中也提供了獲取歷史資料的函式版本matplotlib 2.2中

用canvas實現滑鼠拖動繪製矩形框

需要用到jCanvas外掛和jQuery。程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

如何在CAD中繪製聚合線，並儲存為電腦桌面？

如何在CAD中繪製聚合線，並儲存為電腦桌面？在我們進行繪製CAD圖紙的時候，一般都是藉助一些工具來進行繪製的，那就是CAD編輯器，在CAD編輯器中，繪圖是最基本的操作，編輯器中也有很多的功能來工我們繪圖時來使用，但是在如何在CAD中繪製聚合線，並儲存為電腦桌面？具體要怎麼來操作呢？下面小編就來教教大家在迅捷C

高達1萬歐元！AI所繪製的畫作出現在佳士出場

Obvious 將14世紀到19世紀期間的15000幅人類藝術史最棒的作品作為訓練資料，而機器學習後由人工智慧來做畫。你可能會問「誰會買機器畫的畫？」事實是，在今年二月，Obvious的這個Belamy系列已經成功賣出第一幅作品，一名法國收藏家以1萬歐元的價格收購了名為《Le Comte de

影象流場的繪製以及laplacian平滑處理

下載網址：https://download.csdn.net/download/lykymy/10799369 視訊網址：https://www.bilibili.com/video/av36468064/ 網格的繪製十字標架的繪製能量公式的計算 la

【每日coding】繪製點線

def draw(path): from PIL import Image from matplotlib import pyplot as plt image = Image.open(path) x = [100, 100, 400

1.2為多變數資料繪製散點陣圖

1 # 繪出6個圖形，包括了以下幾個列：花萼長度、花萼寬度、花瓣長度和花瓣寬度 2 plt.close('all') # 關掉其他的影象 3 plt.figure(1) 4 5 # 繪製一個3行2列的圖 6 subplot_start = 321 7 col_numbers = r

python繪製螺旋線

#coding=utf-8 from math import sqrt,cos,sinimport Image, ImageDraw class SpireShape(object): def __init__(self, draw): self.draw

D3D9 簡單圖形的繪製以及顯示

哎呦，不錯哦。三、最後一步了，進行顏色的上色。在Direct3D中，顏色使用RGB三原色來表示，分解為紅色(Red),綠色（Green），藍色（Blue）。RGB資料可以用兩種不同的結構來儲存，第一種是D3DCOLOR,它實際上與DWORD型別

mpandroidchart 繪製K線圖難點解決-高亮連線與表格對齊

mpandroidchart 繪製K線圖最少要處理高亮和對齊問題先來個圖片看下效果 1、對齊直接說重點，設定表格對齊的屬性，靠右顯示y軸就不說了 YAxis myYAxis = combinedChart.getAxisRight();

Android給button某條邊繪製邊框線

以下是設定按鈕的底邊框顏色為bule，邊框大小為2dp，如下圖：在drawable新建一個 buttonstyle.xml的檔案，內容如下：這種方式中，每個item相當於一個顏色塊，使用白色的顏色快蓋住藍色的顏色塊，但是露出了藍色塊下方的一部分<?xml version

IOS端K線系列之K線-繪製蠟燭圖

k線系列目錄檢視目錄請點選這兒補充知識 K線雖然看上去複雜，但仔細觀察就會知道幾乎所有的k線無非由以下幾種組成：（1）蠟燭（2）OHLC （3）線段（4）帶狀（5）圓形除此之外還有其他的，都是比

Android開發之Path的高階用法用貝塞爾曲線繪製波浪線

前言：貝塞爾曲線分為一級曲線，二級曲線，三級曲線和多級曲線，利用貝塞爾曲線可以做出很多有意思的動畫和圖形，今天我們就來實現一個比較簡單的波浪線。 -----------------分割線--------------- 初步認識貝塞爾曲線： mPath.moveTo：設定起點

canvas畫布在畫布中繪製2個小球在畫布中做碰壁反彈,當兩小球相撞之後,兩個小球交換速度

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <s

Numpy簡單繪製K線圖實現上漲下跌效果圖（Python）

# 將原始資料中日-月-年格式的日期字串轉換為numpy可以處理的年月日格式 def dmy2ymd(dmy): dmy = str(dmy, encoding='utf-8') date = dt.datetime.strptime(dmy, '%d-%m-

1.canvas矩形的繪製以及線的繪製

1.Canvas矩形以及線的API

相關推薦