粗线条html,html5 canvas绘制线条

html5 canvas绘制线条

学习html5 canvas绘制线条

个人笔记:

getContent('2d')

用于获取canvas的2D绘图环境(获取一张纸)

moveTo(x,y)

设置起始点(将笔尖放在纸上)

lineTo(x,y)

设置新节点(移动笔)

stroke()

绘制出moveTo和lineTo设置的节点

strokeStyle

设置线条颜色

lineWidth

设置线条粗细

lineCap

设置线条类型

beginPath

确定绘制过的图形，如果开始绘制新图形时候不进行beginPath操作将会重新渲染之前绘制过的图形。

颜色

粗细

1

2

3

4

5

6

画笔

■

●

▅

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()

})

})

})

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;}