Javascript拼接HTML字符串的方法列举及思路

摘要: 转载过来,去掉一些废话吧。目标:方便的拼接字符串,不使用让人眼晕的+=。使用过程如下:1,先创建一个作为“模板”的字符串,如:’My name is ${name},I\’m ${age}.’2,传一个对象进去,其中包含了你要填进模板的值,如:{name:’LIX’,age:11}3,最后你就能得到... 阅读全文
posted @ 2014-11-25 10:27 十年灯 阅读(6532) 评论(0) 推荐(0) 编辑

javascript定义变量和优先级的问题

摘要: 这篇文章可以和上一篇函数优先级的文章结合起来看。看下面的代码:if (!("aa" in window)) { alert('oh my god'); var aa = 1; } alert("aa" in window);alert(aa);回答以下问题:会报错吗?会弹出几次?第2个alert是true还是false?第3个alert弹出什么?为什么?思考下,然后测试下,如果你回答正确,那么后面的文章就不用看了。-----------------------------在JS里定义变量太简单了,直接一个var ,甚至不用var都可以:v 阅读全文
posted @ 2013-06-03 17:03 十年灯 阅读(632) 评论(0) 推荐(0) 编辑

彻底理解函数声明与函数表达式优先级问题

摘要: 此文讨论一下函数声明和函数表达式的一些不同之处,以及最蛋疼的优先问题,是初级文章。之所以写本文是因为在网上看到一篇与此相关的文章,里面给出了结果但没有分析原因,而我自己也对此有些不肯定,所以我决定自己尝试一下,并记录下来,以便以后再也不用思考这类问题。函数声明即function name () {}这样的代码。首先,我们要确定以下代码是完全正确的:t1();function t1(){console.log("t1");}即函数可以提前调用然后再声明。为什么可以这样?是因为javascript代码是一段一段预载的(即一组script标签),在一段代码预载完成后,会把函数声明 阅读全文
posted @ 2013-05-17 11:33 十年灯 阅读(1685) 评论(0) 推荐(0) 编辑

讨论下canvas画椭圆的方法

摘要: 本文属于《html5 Canvas画图系列教程》在canvas中可以很方便的用arc方法画出圆形,本来圆形也可以看作是一个宽高相等的椭圆,但canvas中根本没有画椭圆的方法,我们要用其他方法来模拟。我们首先要明确画一个椭圆需要那些参数,基本的几何知识告诉我们,椭圆需要圆心坐标,宽度,高度——或者还有旋转角度,不过这个可以暂时不要,旋转是比较容易的。1,使用lineTo画椭圆你没有看错,lineTo这样一个纯粹用来画直线的方法居然可以用来画椭圆!?但他确实存在,不过写法实在是有些不可思议:function DrawEllipse(Canvas,O,OA,OB){ //画椭圆,例子:var... 阅读全文
posted @ 2013-01-09 10:11 十年灯 阅读(2469) 评论(7) 推荐(0) 编辑

[推荐]实在受不了canvas的语法了!我要让他支持链式语法!

摘要: 2013.08.28更新:此次更新是修复上一次更新的遗留问题,即"有返回值的函数无法得到正确的返回值",比如getImageData,isPointInPath等,这个问题是因为为了实现链式语法,函数会总是返回this.其实要修复这个问题是很简单的,就是判断函数执行后是否有返回值,有的话就返回这个返回值,没有就继续返回this(大多数情况下都没有).不过由于这个判断的原因,可能会对整体效率有那么一点点的影响;另外,在使用有返回值的函数后,后续就不能继续链式语法了.另外我把原来的用来放函数名的数组变成了一个字符串,因为这样可以少写很多引号.var XtendCanvas = 阅读全文
posted @ 2012-12-21 17:12 十年灯 阅读(3614) 评论(17) 推荐(29) 编辑

html5 Canvas画图6:曲线之arcTo

摘要: 上一篇文章讲了canvas的arc方法,这一篇讲和他有关的arcTo方法。arc与arcTo,从名字都能看出来相似。arcTo也是画曲线的方法,而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点,而且这两个点中并没有表示圆心的点,仅仅最后的参数是圆的半径,表示arcTo和圆有那么点关系。网上关于arcTo的文章很少,好不容易找到一篇还是外国的;而且canvas画图木有直观工具,只能靠猜,arcTo害我猜了半天。。为了直观的描述,我采取了一种辅助办法:arcTo画到哪里,我就用lineTo 阅读全文
posted @ 2012-12-17 10:41 十年灯 阅读(4583) 评论(3) 推荐(2) 编辑

html5 Canvas画图5:画曲线之arc

摘要: 在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊,我还没摸透,所以要一步步尝试。canvas里画曲线的难点之一,就在于他连曲线的函数就有4个!分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。arc的作用是画一个正规的圆弧,可以是一个完整的圆,也可以是一个圆的某一段弧线。arc的语法如下:context.arc(x, y, radius, startAngle, endAngle, anticlockwise)他的参数我解释一下,即arc(圆心x,圆心y,半径, 阅读全文
posted @ 2012-12-06 15:32 十年灯 阅读(1769) 评论(3) 推荐(2) 编辑

html5 Canvas画图4:填充和渐变

摘要: 一般绘图的方式有两种,即填充和描边,前面的文章已经讲了描边的方法stroke,本文就讲一下Canvas中填充图形的方法。填充即fill(),很直白吧?而且和strokeStyle表示描边样式一样,fillStyle即表示填充样式。ctx.fillStyle = '颜色';默认的填充样式是不透明的黑色提问:未闭合的路径可以填充吗?可以。Canvas会从你当前路径的终点直接连接到起点,然后填充。如图:但你可以发现,最后一段没有描边。记得我们前一篇文章用4条线画了一个正方形,但canvas不会这么差劲,连直接绘制矩形的函数都没有。你可以使用fillRect()直接填充一个矩形:ctx 阅读全文
posted @ 2012-11-30 16:43 十年灯 阅读(2556) 评论(0) 推荐(0) 编辑

html5 Canvas画图3:1像素线条模糊问题

摘要: 接上一篇canvas画线条教程上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图:这样的线条显然不是我们想要的。这篇文章的目的就是弄清楚里面的原理,以及解决它。大家都知道屏幕上最小的显示尺寸就是1像素,虽然小于1像素的东西可能显示不出来,但计算机可不管,他会试着画一下。其实像素终究来说也是一个单位,假如我们把画布放大到足够大,足以看清楚每个像素,会是什么情况呢?大概是这个样子:每个像素都有起止范围,如图所示,他们的范围从左起,跨过1像素,到右止。如果我们画1像素线条的时候,遵循像素的起止范围,那么我们肯定能得到一个很标准的细线。如下:但遗憾的是canvas的线条 阅读全文
posted @ 2012-11-27 10:03 十年灯 阅读(5396) 评论(5) 推荐(1) 编辑

html5 Canvas画图2:画线条

摘要: 如果你还不知道Canvas是什么,可以看看上一篇.在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形。在Canvas中也是如此。在开始之前我们先拿出画布和画笔:var cvs = document.getElementById('cvs'); //画布var ctx = cvs.getContext('2d'); // 画笔我们画画的时候,落笔点是不固定的,随时都会变。canvas虽然不是通过手来决定落笔点,但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布,然后移动到指定的点(即坐标)。ctx.moveTo(x,y)此过程中不 阅读全文
posted @ 2012-11-26 11:41 十年灯 阅读(2526) 评论(2) 推荐(3) 编辑