canvas 画线条

最新推荐文章于 2024-11-15 13:22:53 发布

不是我的货

最新推荐文章于 2024-11-15 13:22:53 发布

阅读量444

点赞数

分类专栏： html5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/wym1581/article/details/50610915

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
	   <style>
	   canvas{
	   background:#ccc;
	   }
	   </style>
		<title>noTitle</title>
		<meta charset="">
		<link rel="stylesheet" href="">
		<script>
		  window.οnlοad=function  () {
		    var canvas=document.getElementById("canvas");
			var cobj=canvas.getContext("2d");
//			cobj.strokeStyle="#ff0000";
//			cobj.rect(0,0,100,100);声明绘制一个矩形
//			cobj.stroke();开始绘制
//			cobj.fill();
//            drawRect (0,0,300,300)
//             function drawRect (x,y,w,h) {
//			   cobj.rect(x,y,w,h);
//			   cobj.stroke();
//             }
		  }
		</script>
	</head>
	<body>
	<canvas id="canvas" width=500 height=500>
	     请您升级浏览器
	</canvas>
	</body>
</html>

<pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
	   <style>
	   canvas{
	   background:#ccc;
	   }
	   </style>
		<title>noTitle</title>
		<meta charset="">
		<link rel="stylesheet" href="">
		<script>
		  window.οnlοad=function  () {
		    var canvas=document.getElementById("canvas");
			var cobj=canvas.getContext("2d");
//			cobj.moveTo(0,0);起点
//			cobj.lineTo(100,100);终点
//			cobj.stroke();开始绘制
//			cobj.beginPath();打断连续画图，重新设置起点
//			cobj.lineTo(0,200);
//			cobj.lineTo(300,300);
//			cobj.lineTo(100,400);
//			cobj.stroke();

             canvas.οnmοusedοwn=function  (e) {//模拟画板
			   var mx=e.layerX;
			   var my=e.layerY;
			   cobj.moveTo(mx,my);
			   canvas.οnmοusemοve=function  (e) {
			     var endx=e.layerX;
			     var endy=e.layerY;
				 cobj.lineTo(endx,endy);
				 cobj.stroke();
			   }
			   canvas.οnmοuseup=function  () {
			    canvas.οnmοusemοve=null;
				canvas.οnmοuseup=null;
			   }
             }
		  }
		</script>
	</head>
	<body>
	<canvas id="canvas" width=500 height=500>
	     请您升级浏览器
	</canvas>
	</body>
</html>

<pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
	   <style>
	   canvas{
	   background:#ccc;
	   }
	   </style>
		<title>noTitle</title>
		<meta charset="">
		<link rel="stylesheet" href="">
		<script>
		  window.οnlοad=function  () {
		    var canvas=document.getElementById("canvas");
			var cobj=canvas.getContext("2d");
			//实现画矩形
			 drawRect(100,100,200,200);
			 drawCircle(150,150,50);
            function drawRect (x,y,w,h) {
			  cobj.beginPath();
			  cobj.moveTo(x,y);
			  cobj.lineTo(x+w,y);
			  cobj.lineTo(x+w,y+h);
			  cobj.lineTo(x,y+h);
			  cobj.closePath();
			  cobj.stroke();
            }
			//画圆形
			 function drawCircle (x,y,r) {
			    cobj.beginPath();
               for (var i=0; i<360; i++) {
			     cobj.lineTo(x+r*Math.cos(i*Math.PI/180),y+r*Math.sin(i*Math.PI/180));//i为角度，则lineto的参数为弧度
				cobj.stroke();
               }
			 }
			}
		</script>
	</head>
	<body>
	<canvas id="canvas" width=500 height=500>
	     请您升级浏览器
	</canvas>
	</body>
</html>

<pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
	   <style>
	   canvas{
	   background:#ccc;
	   }
	   </style>
		<title>noTitle</title>
		<meta charset="">
		<link rel="stylesheet" href="">
		<script>
		  window.οnlοad=function  () {
		    var canvas=document.getElementById("canvas");
			var cobj=canvas.getContext("2d");
			cobj.lineWidth=15;//设置线条的粗细
			//cobj.lineCap="square";设置起点的样式为方形，round为圆形
			//cobj.lineJoin ="bevel";设置拐角的类型，round为圆角，bevel为斜角
			cobj.miterLimit=3;
			cobj.moveTo(100,100);
			cobj.lineTo(200,200);
			cobj.lineTo(180,100);
			cobj.stroke();
			}
		</script>
	</head>
	<body>
	<canvas id="canvas" width=500 height=500>
	     请您升级浏览器
	</canvas>
	</body>
</html>