yd12300浜戦《绾胯矾(鑲′唤)鏈夐檺鍏徃

学习html5第一天（canvas绘制线条）

时间：2014/4/16 18:48:30 作者：tsccwl 人气：标签：学习html5第一天（canvas绘制线条）

<h1>仅支持高端浏览器和ie9+</h1>
<h1>学习html5第一天（canvas绘制线条）</h1>
个人笔记: <details><summary><code>getContent('2d')</code></summary> 用于获取canvas的2D绘图环境（获取一张纸）

</details><details><summary><code>moveTo(x,y)</code></summary> 

设置起始点（将笔尖放在纸上）

</details><details><summary><code>lineTo(x,y)</code></summary> 

设置新节点（移动笔）

</details><details><summary><code>stroke()</code></summary> 

绘制出moveTo和lineTo设置的节点

</details><details><summary><code>strokeStyle</code></summary> 

设置线条颜色

</details><details><summary><code>lineWidth</code></summary> 

设置线条粗细

</details><details><summary><code>lineCap</code></summary> 

设置线条类型

</details><details><summary><code>beginPath</code></summary> 

确定绘制过的图形，如果开始绘制新图形时候不进行beginPath操作将会重新渲染之前绘制过的图形。

</details>



<div>颜色<input id="color" value="#1E93E1" type="color" /> 粗细<select id="size"> <option selected="selected" 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 selected="selected" value="butt">■</option> <option value="round">●</option> <option value="square">▅</option></select> </div>
<canvas id="canvas" height="400" width="800"></canvas> 
<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'

/* [测试] 不使用beginPath直接进行新的绘图
oCanvas.context.moveTo(11,11)
oCanvas.context.lineTo(111,111)
oCanvas.context.stroke()
oCanvas.context.strokeStyle="pink"

//当绘制新图形的时候的时候必须先beginPath S
//oCanvas.context.beginPath()
//oCanvas.context.moveTo(111,111)
//当绘制新图形的时候的时候必须先beginPath E

oCanvas.context.lineTo(222,222)
oCanvas.context.stroke()
*/


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>
<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 =============================================================================*/ 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; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre {margin: 15px 0; } /* HEADERS =============================================================================*/ 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; } /* LINKS =============================================================================*/ a {color: #4183C4; text-decoration: none; } a:hover {text-decoration: underline; } /* LISTS =============================================================================*/ 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; } /* CODE =============================================================================*/ 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; } /* QUOTES =============================================================================*/ blockquote {border-left: 4px solid #DDD; padding: 0 15px; color: #777; } blockquote>:first-child {margin-top: 0px; } blockquote>:last-child {margin-bottom: 0px; } /* HORIZONTAL RULES =============================================================================*/ hr {clear: both; margin: 15px 0; height: 0px; overflow: hidden; border: none; background: transparent; border-bottom: 4px solid #ddd; padding: 0; } /* TABLES =============================================================================*/ 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; } /* IMAGES =============================================================================*/ img {max-width: 100% }

canvas{
border:2px dashed skyblue;
cursor: Crosshair;
}
</style>

提示：复制和保存代码功能在FF下无效。

上一篇：嘀嘀打车接入大众点评打车软件开始拼服务
下一篇：CSS+JS实现结构化无限级导航菜单列表(直接调用)

yd12300浜戦《绾胯矾(鑲′唤)鏈夐檺鍏徃

本站首页

关于我们

新闻中心

网站报价

成功案例

400电话

联系方式