canvas 實現簡單的影象擴散

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

canvas 實現簡單的影象擴散

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var x1=200,x2=400,x3=600,y1=400,y2=400,y3=400,lr1=10,lr2=10,lr3=10;
var lc1="#EE7942";lc2="#EE2C2C";lc3="#CD6839";
var lr1,lr2,lr3;


drawarc(15,"#CAE1FF",1);
drawarc(25,"#98FB98",2);
drawarc(25,"#757575",3);

drawarc(30,"#000000",1);
drawarc(35,"#32CD32",2);
drawarc(50,"#6959CD",3);


drawarc(45,"red",1);
drawarc(50,"#fff",2);
drawarc(65,"#000",3);


function drawarc(radiu,ecolor,type){
		var grd;
		var x,y,r;
		var scolor;
			switch(type){
				case 1:
					x=x1;
					y=y1;
					r=lr1;
					lr1=radiu;
					scolor=lc1;
				break;
				case 2:
					x=x2;
					y=y2;
					r=lr2;
					lr2=radiu;
					scolor=lc2;
				break;
				case 3:
					x=x3;
					y=y3;
					r=lr3;
					lr3=radiu;
					scolor=lc3;
				  break;
				default:
			}
		grd=cxt.createRadialGradient(x,y,r,x,y,radiu);
		grd.addColorStop(0,scolor);
		grd.addColorStop(1,ecolor);
		cxt.fillStyle=grd;
		cxt.beginPath();
		cxt.arc(x,y,radiu,0,360,false);
		cxt.closePath();
		cxt.fill();
}
</script>

</body>
</html>

canvas 實現簡單的影象擴散

canvas 實現簡單的影象擴散 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="8

使用canvas實現簡單動畫

大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的 getContext()獲得的一個“繪圖環境”物件上。實現如下星星的運動<!DOCTYPE html> <html> <head&g

canvas實現簡單的畫圖功能

var bot;//畫布div var X,Y,X1,Y1;//座標 var flag=0; var time;//定時器ID var color=0;//記住所選顏色 var lineW=2;//畫筆粗細

2.使用canvas實現簡單的畫直線橡皮筋式畫框

css樣式基本和之前的一樣，這裡就不提了， HTML程式碼： <div id='controls'> Stroke color: <select id="strokeStyleSelect">

canvas實現簡單的畫筆功能

<!DOCTYPE> <html><head><meta charset="UTF-8"><title>模仿筆畫</title><style type="text/css">#_canvas{background-color:

html5 canvas 實現簡單繪製折線圖

<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>畫圖</title&g

opencv3實現簡單的數字影象識別（KNN）

正在用opencv3做一個數字影象識別的小專案，要用到KNN，但是不熟悉它的介面，因此，借鑑了大佬的部落格，基本照搬了程式碼，程式碼如下：大佬的連結如下：http://www.cnblogs.com/denny402/p/5033898.html // knnrecognizenum

幾種常見計算機影象處理操作的原理及canvas實現

2013-09-21 • 技術文章 • 評論前言即使沒有計算機圖形學基礎知識的讀者也完全不用擔心您是否適合閱讀此文，本文的性質屬於科普文章，將為您揭開諸如Photoshop、Fireworks、GIMP等軟體的影象處理操作的神祕面紗。之前您也許對這些處理技術感到驚

python實現簡單的影象對比

在UI自動化測試的結果驗證過程中，不免會用到截圖對比這個方式來判斷是否測試通過。以下是一個簡單的實現，使用第三方庫：Pillow，精確度可能不會很高，但足夠應付簡單的驗證。 from PIL import Image #使用第三方庫：Pillow import

canvas畫線API實現簡單地圖

做一個青海專案時，涉及到地圖，簡單顯示青海省個地區的用了一個svg外掛，要求顯示熱點資料的就用了百度的地圖API。地圖的確高大上。回顧一、後臺老大哥負責跟客戶溝通的，突然有一天客戶要求說登入頁顯示地區的地圖要有3D效果。心裡頓時有一萬匹草泥馬奔過~~

QT+opencv實現簡單的影象處理介面

本來實現的功能是比較簡單的，但在實現過程中遇到不少問題，所以就寫下來作為一個小結，也可以供大家參考：實現的目標視窗如下： 1、其中選單欄的檔案裡實現開啟測試檔案，開啟自定義檔案，還原影象，清除影象，退出系統等功能，這些功能的實現可以參考《opencv程式設計案例》這本書

Tensorflow實現簡單的影象分類器

一個簡單的Tensorflow圖片分類器，資料集是iris資料集。兩個指令碼premade_estimator.py分類器指令碼、iris_data.py處理資料的指令碼。 #iris_data.py 下載資料集，並且處理資料集 import pand

Python+OpenCV靜態影象讀取與顯示_Haar模型實現簡單的人臉識別

目的： 1.主要是熟悉一下靜態影象的讀取與顯示； 2.然後瞭解下基於OpenCV安裝目錄下haar特徵識別人臉區域(人臉特徵資料) 基於“tengxing007”的部落格： Python + OpenCV 實現簡單的人臉識別點選開啟連結下載了作者github上的程式碼，程

opencv學習實現簡單的影象離散傅立葉變換

離散傅立葉變換就是將影象從空間域轉換到頻域，這一轉換基本原理為：任一函式都可以表示成無數個正弦和餘弦函式的和的形式，二維影象的傅立葉變換可用公式表示為：其中，f是空間域，F是頻域，轉換之後的頻域值是複數，因此顯示傅立葉變換之後的結果需要使用實物影象加虛數影象或者幅度影

Linux系統編程_1_文件夾讀取(實現簡單ls命令)

pen clu 指定 edi std exit != flag xxx 閑來無事。隨便寫寫，實現簡單的ls命令： | 1 #include <stdio.h> | 2 #include <stdlib.h> | 3 #include

使用redis實現簡單的秒殺

lec connect use decode else 隊列 def 固定 urn 自己做的簡單秒殺感覺思路是沒太大問題的但是代碼寫的不是很好做個記錄方便以後回來嘲諷下自己 <?phpnamespace frontend\controllers;use Y

Struts1應用、實現簡單計算器、使用DispatchAction、顯示友好的報錯信息、使用動態Form簡化開發

實體類 ica setattr sources 建立 -s number asc rlogin 實現簡單的支持加、減、乘、除的計算器復制一份Struts1Demo改動：Struts1Calc 方案1： Struts1Calc 創建ActionForm： CalcFor

多線程實現簡單的事件異步處理框架

void 序列化以及 ise 包含反序列化高程結合映射老實說，多線程在web開發裏面非常常見，很多web容器本身就支持多線程，所以很多時候我們在進行web開發的時候並不需要考慮多線程相關的負責問題，而只需要實現相關的業務功能即可。所以，可以概括地講，很多時候的w

Shell 實現簡單計算器功能

shell 計算器Shell 實現簡單計算器功能，腳本如下：[[email protected]/* */ scripts]# cat jisuan.sh #!/bin/bash print_usage(){ printf $"USAGE:$0 NUM1 {+|-|*|/} NUM2\n"

PHP 實現簡單的樹形列表。

開發記錄動態數據庫設計在線最近在為公司開發一個在線瀏覽PDF文檔的小web系統。在構建動態列表的時候犯了愁，很久沒寫代碼了，手有些生了，搞了半天才搞出來，寫篇博文記錄一下。首先是數據庫設計我設計的一個列數為三列的表Treenodes，這三列分別用來存儲當前節點的id、節點名稱、父

canvas 實現簡單的影象擴散

相關推薦