html5 canvas绘制线条

2024-09-05 12:19:03

字体：大中小

来源：转载

供稿：网友

学习使用HTML5的Canvas画线条，并介绍了各个函数方法的具体用途，我想学习HTML5的一定要看哦。比如 getContent('2d')用于用于获取canvas的2D绘图环境（获取一张纸）；beginPath用于确定绘制过的图形，如果开始绘制新图形时候不进行beginPath操作将会重新渲染之前绘制过的图形。还有lineCap、strokeStyle的用法，请运行效果后查看，记的要使用火狐或chrome浏览器。

<!doctype html><html lang="en"><head><title>html5 canvas绘制线条</title></head><body><h1>学习html5 canvas绘制线条</h1><p>个人笔记:	<details>	<summary><code>getContent('2d')</code></summary>	<p>用于获取canvas的2D绘图环境（获取一张纸）</p></details>	<details>	<summary><code>moveTo(x,y)</code></summary>	<p>设置起始点（将笔尖放在纸上）</p></details>	<details>	<summary><code>lineTo(x,y)</code></summary>	<p>设置新节点（移动笔）</p></details>	<details>	<summary><code>stroke()</code></summary>	<p>绘制出moveTo和lineTo设置的节点</p></details>	<details>	<summary><code>strokeStyle</code></summary>	<p>设置线条颜色</p></details>	<details>	<summary><code>lineWidth</code></summary>	<p>设置线条粗细</p></details>	<details>	<summary><code>lineCap</code></summary>	<p>设置线条类型</p></details>	<details>	<summary><code>beginPath</code></summary>	<p>确定绘制过的图形，如果开始绘制新图形时候不进行beginPath操作将会重新渲染之前绘制过的图形。</p></details></p><div>	颜色<input type="color" id="color" value="#1E93E1">	粗细<select  id="size">		<option value="1">1</option>		<option value="2">2</option>		<option value="3">3</option>		<option value="4">4</option>		<option value="5">5</option>		<option value="6">6</option>	</select>	画笔<select  id="type">		<option value="butt">■</option>		<option value="round">●</option>		<option value="square">▅</option>	</select></div><canvas id="canvas" width="800" height="400" ></canvas><script src="/ajaxjs/jquery-1.8.3.min.js"></script><script>var oCanvas={	$ele:null,	ele:null,	context:null,	clickCount:0}var oNimo={	$Doc:null,	$color:null,	$size:null,	$type:null}$(function(){	oNimo.$Doc=$(document);	oNimo.$color=$('#color');	oNimo.$size=$('#size');	oNimo.$type=$("#type")	oNimo.$color.on('change',function(){		var $this=$(this);		oCanvas.context.strokeStyle=$this.val();	})	oNimo.$size.on('change',function(){		var $this=$(this);		oCanvas.context.lineWidth=$this.val();	})	oNimo.$type.on('change',function(){		var $this=$(this);		oCanvas.context.lineCap=$this.val();	})	oCanvas.ele=document.getElementById('canvas');	oCanvas.context=oCanvas.ele.getContext('2d');	oCanvas.$ele=$(oCanvas.ele);	oCanvas.context.strokeStyle='#1E93E1'	oCanvas.$ele.on('mousedown',function(){		oCanvas.$ele.one('mousemove.line',function(event){			var $this=$(this);			var iPageX=event.pageX;			var iPageY=event.pageY;			var oCanvasPosition=$this.position();			var iClickX=iPageX-oCanvasPosition.left;			var iClickY=iPageY-oCanvasPosition.top;			oCanvas.context.moveTo(iClickX,iClickY);			oCanvas.context.lineTo(iClickX+1,iClickY+1);			oCanvas.context.stroke();			$this.on('mousemove.line',function(event){				var $this=$(this);				var iPageX=event.pageX;				var iPageY=event.pageY;				var oCanvasPosition=$this.position();				var iClickX=iPageX-oCanvasPosition.left;				var iClickY=iPageY-oCanvasPosition.top;				oCanvas.context.lineTo(iClickX,iClickY);				oCanvas.context.stroke();			})		})		oNimo.$Doc.one('mouseup',function(){			oCanvas.$ele.off('mousemove.line')			oCanvas.context.beginPath()		})	})})</script></body></html><style>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; }body {font-family: /5FAE/8F6F/96C5/9ED1,consolas; font-size: 14px; line-height: 1.6; color: #333; background-color: #fff; padding: 20px; max-width: 960px; margin: 0 auto; } body>*:first-child {margin-top: 0 !important; } body>*:last-child {margin-bottom: 0 !important; }p, blockquote, ul, ol, dl, table, pre {margin: 15px 0; }h1, h2, h3, h4, h5, h6 {margin: 20px 0 10px; padding: 0; font-weight: bold; -webkit-font-smoothing: antialiased; } h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {font-size: inherit; } h1 {font-size: 28px; color: #000; } h2 {font-size: 24px; border-bottom: 1px solid #ccc; color: #000; } h3 {font-size: 18px; } h4 {font-size: 16px; } h5 {font-size: 14px; } h6 {color: #777; font-size: 14px; } body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {margin-top: 0; padding-top: 0; } a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {margin-top: 0; padding-top: 0; } h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {margin-top: 10px; }a {color: #4183C4; text-decoration: none; } a:hover {text-decoration: underline; }ul, ol {padding-left: 30px; } ul li > :first-child, ol li > :first-child, ul li ul:first-of-type, ol li ol:first-of-type, ul li ol:first-of-type, ol li ul:first-of-type {margin-top: 0px; } ul ul, ul ol, ol ol, ol ul {margin-bottom: 0; } dl {padding: 0; } dl dt {font-size: 14px; font-weight: bold; font-style: italic; padding: 0; margin: 15px 0 5px; } dl dt:first-child {padding: 0; } dl dt>:first-child {margin-top: 0px; } dl dt>:last-child {margin-bottom: 0px; } dl dd {margin: 0 0 15px; padding: 0 15px; } dl dd>:first-child {margin-top: 0px; } dl dd>:last-child {margin-bottom: 0px; }pre, code, tt {font-size: 12px; font-family: Consolas, "Liberation Mono", Courier, monospace; } code, tt {margin: 0 0px; padding: 0px 0px; white-space: nowrap; border: 1px solid #eaeaea; background-color: #f8f8f8; border-radius: 3px; } pre>code {margin: 0; padding: 0; white-space: pre; border: none; background: transparent; } pre {background-color: #f8f8f8; border: 1px solid #ccc; font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px; border-radius: 3px; } pre code, pre tt {background-color: transparent; border: none; } blockquote {border-left: 4px solid #DDD; padding: 0 15px; color: #777; } blockquote>:first-child {margin-top: 0px; } blockquote>:last-child {margin-bottom: 0px; } hr {clear: both; margin: 15px 0; height: 0px; overflow: hidden; border: none; background: transparent; border-bottom: 4px solid #ddd; padding: 0; }  table th {font-weight: bold; } table th, table td {border: 1px solid #ccc; padding: 6px 13px; } table tr {border-top: 1px solid #ccc; background-color: #fff; } table tr:nth-child(2n) {background-color: #f8f8f8; }img {max-width: 100% }canvas{border:2px dashed skyblue;cursor: Crosshair;}</style>

上一篇：HTML5 canvas绘制chrome浏览器 logo图标

下一篇：斜方向下落的雨滴动画