canvas畫布使用總結

2022-01-29 01:39:02 字數 1895 閱讀 2984

h5自定義畫布:(下面複製貼上就能用了)

html部分:

js部分:

//畫板

var canvas = document.getelementbyid("canvas");

var ctx = canvas.getcontext("2d");

ctx.linewidth = 1.0;

canvas.addeventlistener('touchstart',function(event),

false

) canvas.addeventlistener('touchend',function (event) ,

false

) }

},false

)

//清空畫布

$("#cx").click(function

())

//將某段html通過canvas轉化成顯示

//通過該顯示出來

1.首先引入2.通過下面**獲取到dom物件,然後將其base64資料付給的src即可顯示

var dom=document.getelementbyid("html");

html2canvas(dom).then(

function

(canvas) );

//將某乙個畫布的內容,複製到另一塊畫布上

html部分:

使用者畫的畫布

要複製過去的畫布

js部分:

var canvas=document.getelementbyid("canvas");//

使用者畫的簽名

var ctx=canvas.getcontext("2d");

var imgdata=ctx.getimagedata(0,0,$("#canvas").width(),$("#canvas").height());//

通過getimagedata(左上角座標,右上角座標,獲取的寬度,獲取的高度)獲取使用者畫的畫素

var canvas_fz=document.getelementbyid("canvas_fz");

$(canvas_fz).attr("width",$("#canvas").width()).attr("height",$("#canvas").height()); //

設定要複製到畫布的大小

var canvas_fz_context=canvas_fz.getcontext("2d");

canvas_fz_context.putimagedata(imgdata,0,0);//

通過putimagedata()將畫布附上

通過canvas將進行壓縮,獲取base64資料

var img = new image();//

首先new乙個image物件

img.src=base64;//

這裡的base64是要壓縮的的base64資料

var canvas = document.createelement("canvas");//

獲取畫布物件

var context = canvas.getcontext("2d");

canvas.width = ($("#image-1").width());設定畫布大小,與顯示的大小一樣

canvas.height = ($("#image-1").height());

//核心js就這個

context.drawimage(img,0,0,canvas.width,canvas.height);

var data=canvas.todataurl();//

這樣通過todataurl()方法就獲取到了壓縮後的base64資料

了解canvas畫布

一 什麼是 canvas?二 canvas基本使用 mycanvas width 300 height 300 canvas canvas畫布的預設尺寸是300 150 1 獲取到canvas元素 var c document.getelementbyid mycanvas 2 執行上下文 繪製畫筆...

學習canvas畫布

我們可以用畫布 canvas 繪製各種圖形,下面 是繪製的乙個圓形 doctype html html head title canvas畫布 title meta charset utf 8 meta name viewport content width device width,initial...

canvas畫布基本操作

簡單畫直線和三角形 結合注釋 線條繪製 canvas width 1024 height 768 style border 1px solid aaa display block margin 50px auto 當前瀏覽器不支援canvas,請更換瀏覽器後再試 canvas canvas是基於狀態...