html5 canvas 画写板

最新推荐文章于 2020-11-23 21:33:24 发布

super2007

最新推荐文章于 2020-11-23 21:33:24 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： HTML5 Canvas HTML

本文链接：https://blog.csdn.net/coding_my_future/article/details/9004982

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

今天儿童节。小时候有过一个001画写板。闲来无事，用canvas写一个重温一下。

drawingBoard.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="../css/normalize.css">
        <link rel="stylesheet" href="../css/main.css">
        
        <script src="../script/vendor/jquery-1.9.1.min.js"></script>
        <script src="../script/vendor/jquery.PrintArea.js"></script>
        <script src="../script/vendor/modernizr-2.6.2.js"></script>
        <script src="../script/wheatmark/wheatmark.js"></script>
        <script src="../script/canvas/drawingBoard.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div id = 'header' align="center">
	        <button id = 'create'>点击生成</button><button id = 'hide'>点击隐藏</button><button id = 'clean'>清空图像</button><button id = 'print'>打印图像</button>
        </div>
        <br/>
		<div id='drawWindow' align="center">
			<canvas id ="drawingBoard" width="793" height="1122"></canvas>
		</div>
    </body>
</html>

drawingBoard.js

var beginFlag = 1;
var mousePos ={x: 0,y: 0};
var bx=0,by=0,ex=0,ey=0;

$(document).ready(function(){
    var canvas = document.getElementById('drawingBoard');
    var context = canvas.getContext('2d');
 
    canvas.addEventListener('mousemove', function(evt){
    	mousePos = getMousePos(canvas, evt);
    	ex=mousePos.x;
    	ey=mousePos.y;
    	var message = "Mouse position: " + ex + "," + ey;
    	writeMessage(canvas, message);
    	if(beginFlag===-1){
    		Wheatmark.drawLine(bx,by,ex,ey);
    	}
    	bx=ex;
    	by=ey;
    }, false);

	$('#drawingBoard').mousedown(function(evt){
    	beginFlag = beginFlag*(-1);
    });
	
	$('#drawingBoard').mouseup(function(evt){
    	beginFlag = beginFlag*(-1);
    });
   
	Wheatmark.setCanvas2D('drawingBoard');
	
	$('#create').click(function(){
		$('#drawWindow').css('display','block');
	});
	$('#hide').click(function(){
		$('#drawWindow').css('display','none');
	});
	$('#clean').click(function(){
		Wheatmark.cleanUp();
	});
	$('#print').click(function(){
		var context = canvas.getContext('2d');
	    context.clearRect(0, 0, canvas.width, 50);
		$('#header').css('display','none');
		Wheatmark.print();
		$('#header').css('display','block');
	});
	
});

function writeMessage(canvas, message){
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, 50);
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
}

function getMousePos(canvas, evt){
    //    获得canvas 位置
    var obj = canvas;
    var top = 0;
    var left = 0;
    while (obj && obj.tagName != 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }
 
    // 返回鼠标相对位置
    var mouseX = evt.clientX - left + window.pageXOffset;
    var mouseY = evt.clientY - top + window.pageYOffset;
    return {
        x: mouseX,
        y: mouseY
    };
}

wheatmark.js

;(function(){
	var canvas=null;
	var ctx = null;
	var hkey_key = null;
	var default_header = null;
	var default_footer =null;
	var hkey_root="HKEY_CURRENT_USER\\";
	var hkey_path="Software\\Microsoft\\Internet Explorer\\PageSetup\\";
	
	Wheatmark = {
		setCanvas2D:function(id){
			canvas=document.getElementById(id);
			ctx=canvas.getContext('2d');
		},
		createRect:function(px,py,width,height){
			ctx.fillStyle='#FF0000';
			ctx.fillRect(px,py,width,height);
		},
		drawLine:function(bx,by,ex,ey){
			  ctx.beginPath();
			  ctx.moveTo(bx,by);
			  ctx.lineTo(ex,ey);
			  ctx.stroke();
		},
		halfSize:function(){
			ctx.scale(0.5,0.5);
		},
		drawLineAnimate:function(bx,by,ex,ey){
			  var diffx = (ex-bx)/100;
			  var diffy = (ey-by)/100;
			  var i;
			  for(i=0;i<100;i++){
				  setTimeout('Wheatmark.drawLine('+(bx+diffx*i)+','+(by+diffy*i)+','+(bx+diffx*(i+1))+','+(by+diffy*(i+1))+')',50*i);
			  }
		},
		writeText:function(text,px,py,font,textAlign){
			ctx.font = font;
			ctx.textAlign = textAlign;
			ctx.fillText(text, px, py);
		},
		cleanUp:function(){
			ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
		},
		
		
		sleep:function (numberMillis) {
		    var now = new Date();
		    var exitTime = now.getTime() + numberMillis;
		    while (true) {
		        now = new Date();
		        if (now.getTime() > exitTime)
		            return;
		    }
		},
		//设置网页打印的页眉页脚为空
		pagesetup_null:function () {
			try {
				var RegWsh = new ActiveXObject("WScript.Shell");
				hkey_key = "header";
				default_header = RegWsh.RegRead(hkey_root + hkey_path + hkey_key);
				RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
				
				hkey_key = "footer";
				default_footer = RegWsh.RegRead(hkey_root + hkey_path + hkey_key);
				RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
			} catch (e) {
			}
		},
		// 设置网页打印的页眉页脚为默认值
		pagesetup_default:function () {
			try {
				var RegWsh = new ActiveXObject("WScript.Shell");
				hkey_key = "header";
				RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, default_header);
				hkey_key = "footer";
				RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, default_footer);
			} catch (e) {
			}
		},
		Popup:function(){
			var windowAttr = "location=no,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no";
			//windowAttr += ",width=" + screen.width + ",height=" + screen.height;
			windowAttr += ",width=" + 0 + ",height=" + 0;
			windowAttr += ",resizable=yes,screenX=" + 0 + ",screenY=" + 0 + ",personalbar=no,scrollbars=no,top=10000,left=10000";
			
			var newWin = window.open( "", "_blank",  windowAttr );
			newWin.doc = newWin.document;
			return newWin;
		},
		print:function () {
			Wheatmark.pagesetup_null();
			window.print();
			Wheatmark.pagesetup_default();
		}
	 };
  })();

可以在 http://do.jhost.cn/fitweber/canvas/drawingBoard.html查看效果。请用IE 9.0 或谷歌浏览器等支持html5的浏览器查看。