App下載
首頁(yè) > javascript > drawing_settings > Canvas - 如何將畫布轉(zhuǎn)換為圖像

Canvas - 如何將畫布轉(zhuǎn)換為圖像

我們想知道如何將畫布轉(zhuǎn)換為圖像。 


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
    var canvas = $("#myCanvas");
    var context = canvas.get(0).getContext("2d");
    context.save();
    context.fillRect(50, 50, 100, 100);
    context.fillStyle = "rgb(255, 0, 0)";
    context.fillRect(100, 100, 100, 100);
    context.restore();
    context.fillRect(150, 150, 100, 100);
    var dataURL = canvas.get(0).toDataURL();
    var img = $("<img></img>");
    img.attr("src", dataURL);
    canvas.replaceWith(img);
});//]]>  
</script>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>