HTML5的绘图支持

最新推荐文章于 2025-06-11 11:22:43 发布

eggplant_

最新推荐文章于 2025-06-11 11:22:43 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/eggplant_/article/details/82799404

1、canvas使用

基本用法


<body>
<h2>画图入门</h2>
<!---设置canvas的高度和宽度--->
<canvas id="mc" width="400" height="280" style="border:1px solid black"> </canvas>
<script type="text/javascript">
<!---获取id为mc的DOM对象-->
var canvas=document.getElementById('mc');
var ctx=canvas.getContext('2d');

ctx.fildStyle='#f00';
ctx.fillRect(30,20,120,60);

ctx.fillStyle="#ff0";
<!---填充一个矩形区域-->
ctx.strokeRect(80,60,120,60);

ctx.storkeStyle="#00f";
<!---设置线条宽度-->
ctx.lineWidth=10;
<!---绘制一个矩形边框-->
ctx.strokeRect(30,130,120,60);
ctx.strokeStyle="#0ff";
<!---线条连接风格-->
ctx.lineJoin="round";


ctx.strokeRect(80,160,120,60);
ctx.storkeStyle="#f0f"; 
ctx.lineJoin="bevel";
ctx.strokeRect(130,190,120,60);

</script>
</body>

执行结果为：

点线模式

<html>
<body>
<h2>点线模式</h2>
	<canvas id="mc" width="400" height="280"style="border:1px solid black">
	
	</canvas><p>

	<select id="lineDash" onchange="changeLineDash(this.value);">
	
	</select><p>

	<input type="range"id="lineDashOffset" style="width:300px"
	onchange="changeLineDashOffset (this.value);"/>
	
	<script type="text/javascript">
		var lineDashArr=[[2,2],
			[2.0,4.0,2.0],
			[2.0,4.0,6.0],
			[2.0,4.0,2.0,6.0],
			[2.0,4.0,4.0],
			[2.0,2.0,4.0,6.0,10.0]];
	var phaseMax=20;
	var phaseMin=-20;
	var lineDashEle=document.getElementById("lineDash"); 
	for(var i=0;i<lineDashArr.length;i++){
		lineDashEle.options[i]=new Option(lineDashArr[i],i);
}
	lineDashEle.options[0].selected=true;
	var lineDashOffsetEle=document.getElementById("lineDashOffset");
	lineDashOffsetEle.max=phaseMax;
	lineDashOffsetEle.min=phaseMin;
	lineDashOffsetEle.step=0.1;
	lineDashOffsetEle.value=0;
	var lineDash=lineDashArr[0];
	var lineDashOffset=0;
	function draw(){
		var canvas=document.getElementById('mc');
		
		var ctx=canvas.getContext('2d');
		ctx.fileStyle="#fff";
		ctx.fileRect=(0,0,400,280);
		ctx.strokeStyle="#f0f";
		ctx.lineWidth=2;
		ctx.setLineDash(lineDash);
		ctx.lineDashOffset=lineDashOffset;
		ctx.strokeRect(40,60,120,120);
		ctx.beginPath();
		ctx.arc(300,120,60,60,0,Math.PI*2,true);
		ctx.moveTo(30,30);
		ctx.lineTo(360,30);
		ctx.moveTo(200,50);
		ctx.lineTo(200,240);
		ctx.closePath();
		ctx.stroke();
	}
	function changeLineDash(i){
		lineDash=lineDashArr[i];
		draw();
	}
	function changeLineDashOffset(val)
	{	
		lineDashOffset=val;
		draw();
	}	
	draw();

</script>
</body>



</html>

运行结果为：