HTML5网页绘画板

最新推荐文章于 2022-04-08 10:46:04 发布

qq_37552152

最新推荐文章于 2022-04-08 10:46:04 发布

阅读量592

点赞数

本文链接：https://blog.csdn.net/qq_37552152/article/details/60465696

版权

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<script type="text/javascript">
	var canvas,context;
	window.οnlοad=function(){
	//获得canvas对象--画布
	canvas=document.getElementById("mycanvas");
	//使用cancas对象的getContext()方法
	//来获得Context对象--画笔
	context=canvas. getContext("2d");
	context.lineCap="round";

	canvas.οnmοusedοwn=function(event){
	move1=event.offsetX;
	move2=event.offsetY;
	flag=true;
	}

	canvas.οnmοusemοve=function(event){
	if(flag){
	context.beginPath();
	context.moveTo(move1,move2);
	context.lineTo(event.offsetX,event.offsetY);
	context.stroke();
	move1=event.offsetX;
	move2=event.offsetY;
	}
	}
	canvas.οnmοuseup=function(){
	flag=false;
	}

	}
	</script>
	<style>
	div{float:left;}

	</style>
	</head>
	<body>
	<canvas id="mycanvas" width="800" height="600" style="border:1px solid black;">
	</canvas>
	<div id="fatherdiv">
	<div style="width:50px; height:20px;
	background-color:#F00;"
	onclick="context.strokeStyle='#F00'">
	</div>

	<div style="width:50px; height:20px;
	background-color:#0F0;"
	onclick="context.strokeStyle='#0F0'">
	</div>

	<div style="width:50px; height:20px;
	background-color:#00F;"
	onclick="context.strokeStyle='#00F'">
	</div>

	<div style="width:50px; height:20px;
	background-color:#FF0;"
	onclick="context.strokeStyle='#FF0'">
	</div>

	<div style="width:50px; height:20px;
	background-color:#0FF;"
	onclick="context.strokeStyle='#0FF'">
	</div>

	<div style="width:50px; height:20px;
	background-color:#F0F;"
	onclick="context.strokeStyle='#F0F'">
	</div>

	<div style="width:50px; height:20px;
	background-color:#F60;"
	onclick="context.strokeStyle='#F60'">
	</div>
	<div style="width:50px; height:20px;
	background-color:#000;"
	onclick="context.strokeStyle='#000'">
	</div>
	线条宽度：<input type="text" value="2"
	onblur="context.lineWidth=this.value"/>

	<input type="button" value="清空" onclick="context.clearRect(0,0,800,600)"/>
	</div>

	</body>
	</html>

qq_37552152

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5网页绘画板

xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" content="text/html; charset=utf-8" /> 无标题文档 type="text/javascript"> var canvas,context;
复制链接

扫一扫