前言:
而今小伙伴们对“html5中canvas用于”都比较关怀,姐妹们都需要了解一些“html5中canvas用于”的相关文章。那么小编在网上搜集了一些对于“html5中canvas用于””的相关知识,希望各位老铁们能喜欢,兄弟们一起来学习一下吧!HTML5的canvas的标签可用于绘制图像,不过,canvas元素本身并没有绘制能力,它仅仅是图形的容器,-必须使用javascript脚本来完成实际的绘图任务。
canvas标签的getContext()方法返回一个 CanvasRenderingContext2D 对象,使用它可以在Canvas 画布上绘制文本、线条、矩形、圆形等等,下面话一个矩形。
<canvas id="the_stage" width="600" height="400" style="border:1px solid #999;">您的浏览器不支持canvas!</canvas><script>var c=document.getElementById("the_stage");var ctx=c.getContext("2d");ctx.strokeRect(10,20,100,100);</script>
效果如下:
CanvasRenderingContext2D对象有很多方法和属性,这里不可能一个一个讲解,下面做一个简单的画布功能。
<canvas id="the_stage" width="600" height="400" style="border:1px solid #999;">您的浏览器不支持canvas!</canvas><script>function Draw(arg) { if (arg.nodeType) { this.canvas = arg; } else if (typeof arg == 'string') { this.canvas = document.getElementById(arg); } else { return; } this.init();}Draw.prototype = { init: function() { var that = this; if (!this.canvas.getContext) { return; } this.context = this.canvas.getContext('2d'); this.canvas.onselectstart = function () { return false; //修复chrome下光标样式的问题 }; this.canvas.onmousedown = function(event) { that.drawBegin(event); }; }, drawBegin: function(e) { var that = this, stage_info = this.canvas.getBoundingClientRect(); window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //清除文本的选中 this.context.moveTo( e.clientX - stage_info.left, e.clientY - stage_info.top ); document.onmousemove = function(event) { that.drawing(event); }; document.onmouseup = this.drawEnd; }, drawing: function(e) { var stage_info = this.canvas.getBoundingClientRect(); this.context.lineTo( e.clientX - stage_info.left, e.clientY - stage_info.top ); this.context.stroke(); }, drawEnd: function() { document.onmousemove = document.onmouseup = null; }};var draw = new Draw('the_stage');</script>
通过上面代码,大家应该可以学到一些基础编程技巧,这里要讲解一下:
var that = this;
为什么不直接用this,要多此一举定义一个that呢?
因为当鼠标按下,拖动等动作时候,this的指向对象已经发生了改变,不再是draw这个对象了。
运行后,可以通过鼠标进行简单的绘画,效果如下:
欢迎大家转发和关注。
标签: #html5中canvas用于