html5 canvas绘制线条

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!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 type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

html5 canvas绘制线条

分类

HTML5代码

描述

学习使用HTML5的Canvas画线条，并介绍了各个函数方法的具体用途，我想学习HTML5的一定要看哦。比如&getContent('2d')用于用于获取canvas的2D绘图环境（获取一张纸）；beginPath用于确定绘制过的图形，如果开始绘制新图形时候不进...