利用canvas制作圖片（可縮放和平移）+相框+文字
前言： 公司一個售前問我能不能用H5做一個手機拍照，給相片添加相框和添加文字上傳到服務器的功能，我當時一琢磨覺得可行，就利用空余時間做了一個demo，去掉了拍照和上傳，如果以后有機會，會給補上，當然對於開發過webApp的朋友來做到這個很簡單。下面來看代碼 1，思路 首先我們需要准備 ...
原文：利用canvas和RGraph作圖
利用canvas可以直接在頁面中繪制各種復雜的圖形，其中引用到一個Rgraph的插件。 Rgraph插件使用非常方便，只需幾步就可以完成一個折線圖 餅圖 柱狀圖，或是其中兩者圖形的結合 引用RGraph.common.core.js這個腳本文件，這個是插件的核心腳本，必須引用，否則不可用。但是在測試時，發現有時會報錯，沒用引用jQuery的插件，所以報錯時，需引用這個jquery . . .js ...
2014-04-28 17:32 0 3719 推薦指數：
相關推薦
HTML5 canvas圖形庫RGraph
在新的HTML5標准中，新增了一個非常重要的元素—canvas元素。使用該元素，可以在頁面中直接進行各種復雜圖形的制作。因此，如果使用該元素繪制統計圖，比之前使用服務器端控件來生成統計圖的方法更加具有優越性，因為使用了該元素之后，繪制統計圖的工作是直接在客戶端進行的，而不再是在服務器端所完成 ...
Canvas + JavaScript 制作圖片粒子效果
學習canvas，javascript的小伙伴，可以跟着我這篇文章的思路一起做一個小效果出來，代碼都齊全了。 首先看一下源圖和轉換成粒子效果的對比圖： 左側圖片為源圖，右側圖片為粒子效果圖。該效果是在Canvas畫布上制作的。將圖片制作成粒子效果相對而言是比較簡單的。重點了解兩個知識點 ...
Canvas + JavaScript 制作圖片粒子效果
首先看一下源圖和轉換成粒子效果的對比圖： 左側圖片為源圖，右側圖片為粒子效果圖。該效果是在Canvas畫布上制作的。將圖片制作成粒子效果相對而言是比較簡單的。重點了解兩個知識點即可 1:圖片是通過image對象形式繪制在畫布上的，然后使用Canvas的getImageData接口 ...
Html5使用canvas作圖線寬很粗
自己使用canvas畫圖是碰到的問題，在這里記錄一下。我把lineWidth設置為1，但是很粗，而且發虛。代碼如下： 顯示出來之后發虛，然后網上各種找結果，最后發現是由於canvas沒有設置height與width，css中設置的height與weight對canvas ...
在網頁上畫一個點(HTML5 Canvas作圖)
從這篇文章開始，你們會看到權威的HTML5 Canvas作圖技術，下面是相關圖片： 畫布上有一點p(19,82)，在JavaScript中表示？可以用以下方式： var p=new Array(2); p[0]=19; p[1]=82; 這一點也能被作為“繪圖函數的參數”，看下 ...
畫正圓角矩形 - HTML5 Canvas 作圖
function DrawRoundRect(Canvas,P1,P2,Radius)功能：畫正圓角矩形參數：P1：矩形左上角坐標；P2：矩形右下角坐標； Radius：圓角大小 源代碼： function DrawRoundRect(Canvas,P1,P2,Radius){//畫個圓角矩形 ...
畫閉合的多邊形 - HTML5 Canvas 作圖
10、function DrawPolygon(Canvas,P)功能：畫閉合的多邊形參數：P是一個包含各個頂點坐標的數組實例：<html><script type="text/javascript" src="bigengineer.js"></script> ...