html5 canvas繪制線條_網頁代碼站(www.hbsxmp.com)_網頁代碼站(www.hbsxmp.com)

歡迎您來到網頁代碼站！設為首頁網頁代碼站分割線

網頁代碼站分割線

加入收藏

網頁代碼站分割線

網頁代碼站分割線

留言板

網頁代碼站分割線

精品美文

網頁代碼站分割線

網頁代碼站分割線

在線手冊

如果您關閉了瀏覽器的javascript，可能導致頁面部分功能無法顯示，請開啟javascript以便正常瀏覽本網頁。網頁代碼站(www.hbsxmp.com)謝謝您的支持！

熱搜:div

您的當前位置：網頁代碼站 >> 瀏覽器相關 >> html5 canvas繪制線條_網頁代碼站(www.hbsxmp.com)

html5 canvas繪制線條_網頁代碼站(www.hbsxmp.com)

分類：瀏覽器相關時間：2018-11-09 點擊：

關鍵詞：JS|網頁代碼|特效代碼|

<!doctype html>
<html lang="en">
<head>
<title>html5 canvas繪制線條</title>
</head>
<body>
<!--[if  lt IE 9]>
	<h1>僅支持HTML5的瀏覽器和ie9+，比如Chrome、火狐、Opera等</h1>
<![endif]-->
<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畫線條，并介紹了各個函數方法的具體用途，我想學習HTML5的一定要看哦。比如 getContent('2d')用于用于獲取canvas的2D繪圖環境（獲取一張紙）；beginPath用于確定繪制過的圖形，如果開始繪制新圖形時候不進行beginPath操作將會重新渲染之前繪制過的圖形。還有lineCap、strokeStyle的用法，請運行效果后查看，記的要使用火狐或chrome瀏覽器。

一、如果您使用的瀏覽器版本為IE6.0、360瀏覽器V3.0.8.1版本或者IE的更低版本瀏覽本頁面，建議您升級瀏覽器至IE7以上，上面的“運行”按鈕可能不能用，但您可按以下方式查看。
運行代碼方式：
1、點擊“復制”按鈕；
2、在桌面建立一個txt文檔；
3、粘貼復制的代碼；
4、最后把txt的擴展名改為“htm”或“html”；
5、完成，打開即可看到效果。

二、如果您使用FireFox或者非IE瀏覽器，建議您使用IE7以上版本。上面的“復制”按鈕失效，請您“全選”，以普通方式復制！

三、某些代碼因需加載完Jquery等之類比較大的JS文件，如果您看不到效果，請您刷新頁面！

四、某些代碼不能完全兼容各瀏覽器，還請您再次修改才能使用！給您帶來的不便！盡請諒解！謝謝您的支持！

上一篇：斜方向下落的雨滴動畫_網頁代碼站(www.hbsxmp.com)
下一篇：HTML5 canvas繪制chrome瀏覽器 logo圖標_網頁代碼站(www.hbsxmp.com)

問問 | 貼吧 | 查詢 | 給我留言 | 精品美文 | 友情鏈接 | | 本站承接網站開發業務
版權聲明 | 廣告服務 | 聯系我們 | 網站地圖 | 關于我們 | | 滇ICP備08101440號
Powered by 網頁代碼站(網頁即"web" + 代碼即"dm" + "cn" = webdm.cn) | 最專業的代碼下載網站 - 致力為中國站長提供高質量的代碼！

滇公網安備 53032202100002號

精品久久久久久久中文字幕