矩形图片交互绘制,怎么做？

linzim 2017-02-22 11:14:53

使用HTML5新布局元素和CSS完成页面布局设计，效果如下图所示

使用form元素、类型为range的input元素和output等元素，在页面左侧区域添加内容，浏览效果如下图所示

当拖动设置矩形宽度和高度的滑块时，会在滑块右侧显示所设置的宽度和高度值，浏览效果如下图所示。

在页面右侧灰色区域放置一个canvas标签（大小与灰色区域相同）。实现以下绘图要求：在页面初始显示时，在右侧的canvas标签中绘制一个与设置的高度和宽度默认值相同的矩形图形（矩形大小、位置和颜色自行确定）。参考效果如下图所示。

当用鼠标拖动设置矩形高度或宽度的滑块时，页面会根据新的高度和宽度值重新绘制矩形图形。参考效果如下图所示。

...全文

711 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

当作看不见 2017-02-22

打赏
举报


<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
	</head>
	<style type="text/css">
		input{
			display: inline-block;
			width: 100px;
			height: 40px;
		}
		.span{
			color: green;
		}
	</style>

	<body>
		<canvas id="can" width="500" height="500"></canvas>
		<input type="range" name="" id="height" value="100" min="0" max="500"/>
		<span class="span">1</span>
		<input type="range" name="" id="width" value="100"  min="0"max="500" />
		<span class="span">1</span>
	</body>

</html>
	<script type="text/javascript">
		var rectH=document.getElementById("height");
		var rectW=document.getElementById("width");
		var ctx=document.getElementById("can").getContext("2d")
		console.log(ctx)
		function draw(){
			ctx.clearRect(0,0,500,500);
			ctx.strokeStyle="#FF0000";
			ctx.strokeRect(0,0,rectH.value,rectW.value);
			var spanlist=document.querySelectorAll("span");
			spanlist[0].innerHTML=rectH.value;
			spanlist[1].innerHTML=rectW.value;
		}
		
		draw();
		rectH.onchange=function(){
			draw();
		}
		
		rectW.onchange=function(){
			draw();
		}
</script>

样式自己写

linzim 2017-02-22