2. 程式人生 > >JavaScript中canvas繪製太極圖案

JavaScript中canvas繪製太極圖案

阿新 • • 發佈：2019-01-20
var canvas = document.getElementById("mycanvas"); //獲取canvas元素 var context = canvas.getContext('2d');//獲取上下文的環境 g1 = context.createLinearGradient(400,100,400,500);//建立線性的漸變物件，引數分別為漸變開始點的x、y座標，漸變結束點的x、y座標。 g1.addColorStop(0,"black");//addColorStop指定各個位置的顏色 g1.addColorStop(1,"white"
); g2 = context.createLinearGradient(400,100,400,500); g2.addColorStop(0,"white"); g2.addColorStop(1,"black"); g3 = context.createRadialGradient(400,200,1,400,200,10);//建立放射狀/圓形漸變物件，引數分別為漸變開始圓的x、y座標，開始圓的半徑，漸變結束圓的x、y座標，結束圓的半徑。 g3.addColorStop(0,"white"); g3.addColorStop(1,"black"
); g4 = context.createRadialGradient(400,400,1,400,400,10); g4.addColorStop(0,"black"); g4.addColorStop(1,"white"); context.arc(400,300,200,1/2*Math.PI,3/2*Math.PI);//arc方法建立圓弧、曲線，引數分別為圓中心的x座標、圓中心的y座標、圓的半徑、起始角、結束角 context.arc(400,200,100,1/2*Math.PI,3/2*Math.PI,true);//counterclockwise(可選)False = 順時針，true = 逆時針。
context.arc(400,400,100,0.5*Math.PI,1.5*Math.PI); context.fillStyle=g1;//設定或返回用於填充繪畫的顏色、漸變或模式。 context.fill(); context.beginPath();//在一個畫布中開始子路徑的一個新的集合。 context.arc(400,300,200,1/2*Math.PI,3/2*Math.PI,true); context.arc(400,200,100,1.5*Math.PI,0.5*Math.PI); context.arc(400,400,100,3/2*Math.PI,1/2*Math.PI,true); context.fillStyle=g2; context.fill(); context.beginPath(); context.arc(400,200,10,0,Math.PI*2); context.fillStyle = g3; context.fill(); context.beginPath(); context.arc(400,400,10,0,Math.PI*2); context.fillStyle = g4; context.fill();

相關推薦

JavaScript中canvas繪製太極圖案

var canvas = document.getElementById("mycanvas"); //獲取canvas元素 var context = canvas.getContext('2d');//獲取上下文的環境 g1 = context.cre

html5中canvas繪製箭頭

網頁端程式碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

小程式中canvas繪製網路圖片

小程式中，canvas繪製圖片，可使用drawImage方法，但是繪製網路圖片時，在手機端不會顯示，需要先將網路圖片下載到本地，然後用圖片的本地路徑繪製。如下虛擬碼：function downLoadI

HTML5中的canvas繪製三個矩形

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title>繪製三個矩形</title>      

微信小程式 用canvas繪製的圖插入到分享中

用canvas繪製圖 createNewImg: function () { var that = this; var ctx = wx.createCanvasContext('mycanvas'); ctx.setFillStyle("#F4F4F4"); // context.set

利用H5中canvas畫布繪製一個時鐘(動態)

注意：Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支援 <canvas> 及其屬性和方法。Internet Explorer 8 以及更早的版本不支援 <canvas> 元素 效果圖如下：     實現

js使用canvas畫布畫太極圖案

程式碼如下： <body> <canvas id="mycanvas"></canvas> <script type="text/javascript"> v

Html+JavaScript 在canvas上繪製帶日期顯示的時鐘 (自己繪製刻度)

       此為博主在研究參考多個時鐘程式碼後，自己總結創新編寫的一個簡潔齊全又美觀的時鐘，本著自己獲益也回饋大眾地分享出來，如有問題或更好的建議歡迎與我交流。       首先建立一個canvas來裝整個時鐘介面： <canvas id="MyClock" wi

Android中canvas.drawText 繪製文字居中

Android中canvas.drawText 繪製文字居中 因為最近多開專案，時間主要花在 coding 和 review 上了，抽空寫個自定義控制元件中的小案例，但是雖然知識點很小但是在開發中很常用 首先來看這個方法： drawText(String text, f

javascript利用canvas解析圖片中的二維碼

本方法兩種應用方式：一種使用canvas解析本站圖片中的二維碼，canvas有同源策略限制，只能處理本站圖片。另一種處理檔案選擇中的圖片二維碼。 第一種使用場景可以換成像微信中一樣，長按圖片識別二維碼。 引用了第三方的qrcode.js解碼，但是這個檔案並未在GitHub中找到，不知道出處。原始碼：

android 開發 View _12_ 用Canvas 繪製一張圖片（部落格中演示用Canvas畫驗證碼圖片）

package net.yt.yuncare.widgets; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import and

HTML5中使用canvas繪製矩形

canvas是HTML5中新增的一個元素，使用Canvas可以繪製任何你喜歡的圖形。先來認識什麼是Canvas？ 1.在頁面上放置一個canvas元素，就相當於在頁面上放置了一塊“畫布”，可以在其中進行影象描繪。 2. canvas 通過 JavaScript 來繪製 2D

JavaScript 中的函數介紹

所有 calculate 曾經 什麽 乘法 函數表達式 second 數字 brush 簡而言之函數只不過是一組執行某個操作的語句。函數可能會有一些輸入參數（在函數體中使用），並在執行後返回值。 　　JavaScript函數也具有這些特性，但它們不僅僅是常規函數。Java

JavaScript中this的用法

屬於 指向 cti 用法 func 生成 純粹 ava 構造函數 this的使用環境有以下幾種 1、純粹的函數調用 純粹的函數調用屬於函數的最常用的用法，屬於全局性調用。在全局函數中，this等於window。 2、作為對象方法的調用 當函數不是全局調用，而是作為某個對象

javaScript中奇葩的假值

http java color false javascrip fin sna 沒有 spa JavaScript中有 6 個值為“假”，這六個值是： false null undefined 0 ‘‘(空字符串) NaN 這裏面 false 本身是布爾類型，其它 5

JavaScript中提供獲取HTML元素位置的屬性：

瀏覽器 var func set height cti fse 屬性 turn HTMLElement.offsetLeft HTMLElement.offsetHeight 但 是需要註意的是，這兩個屬性所儲存的數值並不是該元素相對整個瀏覽器畫布的絕對位置，而是相對於其父

JavaScript中var變量引用function與直接聲明function

function 瀏覽器 開發 今天在h5開發app的過程中遇到了一個js問題，function的執行問題在js中聲明函數function有這兩種方法var A=function(){...}或者function A(){...}第一種稱之為變量引用函數，因為js允許函數作為一個值傳遞給變量，第二

JavaScript中的call、apply、bind是怎麽回事？

ava 利用 參數 lock 們的 app scrip lac target 在JS中，這三者都是用來改變函數的this對象的指向的，他們有什麽樣的區別呢。在說區別之前還是先總結一下三者的相似之處：1、都是用來改變函數的this對象的指向的。2、第一個參數都是this要

JavaScript中return的用法詳解

style 返回 www log tle blog 意思 charset fun 1、定義：return 從字面上的看就是返回，官方定義return語句將終止當前函數並返回當前函數的值，可以看下下面的示例代碼： <!DOCTYPE html><html l

javascript中的undefined與is not defined

ole 返回 對象 javascrip efi {} define var bsp 1. var a; console.log(a); 這裏打印的是undefined; 2. console.log(b); 這裏瀏覽器會報錯，b is not defined; 3. var