先將自己的代碼貼上：
代碼引用自：http://bbs.csdn.net/topics/390683634
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>My JSP 'showCT.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*var image = new Image();
image.src = "/patientHologram/1.2.276.0.7230010.3.1.2.131151856.1900.1409927392.49";
var view = $('#CT_view')[0];
var context = view.getContext('2d');
var imgd = context.createImageData(100,100);
var pix = imgd.data;
for(var i=0;i<pix.length;i+=4){
var pos = Math.floor(i/4);
var grey = raw_data[pos];
pix[i] = p[i+1] = pix[i+3] = grey;
pix[i+3] = 255;
}
context.putImageData(imgd,0,0);
context.drawImage(image,10,10);*/
var canvas = $('#CT_view')[0];
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function(){
if(image.width != canvas.width){
canvas.width = image.width;
}
if(image.height != canvas.width){
canvas.height = image.height;
}
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(image,0,0);
};
image.src = "images/huanzh_07.png";
});
</script>
</head>
<body>
This is my JSP page. <br>
<div>
<img src="images/huanzh_07.png" alt="xxxx">
</div>
<canvas id="CT_view" width="300" height="200" >
Fallback content ,in case the browser does not support Canvas
</canvas>
</body>
</html>
另外在附上一個較爲複雜的實例：
<!DOCTYPE html>
<html>
<head>
<title>地圖編輯頁面</title>
<style type="text/css">
#info{width:500px;}
</style>
</head>
<body>
<div style="height:20px;background:#cccccc;border:solid 1px #00ffff">
這裏保留待用
</div>
<img id="my_img" src="" alt="圖片加載中..." style="z-index:-1;position:absolute;top:32px;border:solid 1px #ff0000" />
<!--故意設置canvas的背景顏色，用於調試-->
<canvas id="canvas" style="z-index:1;position:absolute;top:32px;border:solid 1px #ff99cc">
當前瀏覽器不支持Html5的canvas
</canvas>
<script type="text/javascript">
/**函數:設置img*參數(圖片路徑,回調函數)*/
function setImg(imgUrl,callback) {
var my_img=document.getElementById('my_img');
my_img.src=imgUrl;
if(my_img.complete) {
callback.call(my_img);
return my_img; //可以直接return;
}
my_img.onload = function () {
callback.call(my_img);
};
}
/**函數:初始化canvas和img*/
function init() {
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var arrRec=new Array();
arrRec=getWH();
/*以下兩行，爲了調試，所以註釋起來*/
//canvas.style.width=(parseInt(arrRec[0])+2).toString()+"px";
//canvas.style.height=(parseInt(arrRec[1])+2).toString()+"px";
setImg(getImgUrl(),function() {
ctx.drawImage(this,0,0,parseInt(arrRec[0]),parseInt(arrRec[1]),0,0,parseInt(arrRec[0]),parseInt(arrRec[1]));
});
canvas.style.left="920px"; //這一句是調試零時增加的
}
/**函數:從url中獲取寬和高*/
function getWH() {
var flag=true;
var url=location.search;
/*從url中獲取寬和高的正則*/
var strTemp=url.match(/width=[\d]{1,4}[\&]height=[\d]{1,4}(?=[\&])/g);
var strRep;
var arrRet=new Array();
if(strTemp==null) {
flag=false;
}
else{
strRep=strTemp[0].replace('width=','');
strRep=strRep.replace('height=','');
arrRet=strRep.split('&');
}
if(flag!=true) {
arrRet=new Array("1","1");
}
return arrRet;
}
/**函數:得到url*/
function getImgUrl() {
return "http://api.map.baidu.com/staticimage"+location.search;
}
init(); //初始化
</script>
</body>
</html>代碼引用自：http://bbs.csdn.net/topics/390683634
上述代碼僅僅是將一個圖片放在canvas畫板中顯示出來，其實還可以將圖片按照多種風格去顯示。
下面對canvas的詳解：
http://www.cnblogs.com/jscode/archive/2013/02/26/3568788.html
http://blog.csdn.net/liwei3gjob/article/details/8989920
http://blog.csdn.net/coding_or_coded/article/details/7055858
