有关html中的canvas标签

最新推荐文章于 2022-12-11 14:36:51 发布

DING135DING

最新推荐文章于 2022-12-11 14:36:51 发布

阅读量707

点赞数

分类专栏： javaweb积累文章标签： jsp browser

javaweb积累专栏收录该内容

59 篇文章

订阅专栏

先将自己的代码贴上：

<%@ 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.youkuaiyun.com/topics/390683634

上述代码仅仅是将一个图片放在canvas画板中显示出来，其实还可以将图片按照多种风格去显示。

下面对canvas的详解：

http://www.cnblogs.com/jscode/archive/2013/02/26/3568788.html

http://blog.youkuaiyun.com/liwei3gjob/article/details/8989920

http://blog.youkuaiyun.com/coding_or_coded/article/details/7055858