一、canvas基础

1.canvas是HTML5 的新标签,其默认宽高为300*150.

    
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成.



  2.canvas图形绘制

    
在canvas绘制中首先应该提到的是直线绘制,对于一个直线来说,两点确定一条直线,首先必须有一个起点.那么,  
问题来了,起点在哪?怎么定义起点?在canvas中有一个虚拟坐标系.如图一:

    
canvas中定义左上角为(0,0)点,横向为x轴,向左为正,纵向为y轴,向下为负,当然这是相对于没有旋转的情况来说的.

   
     
 
图一

2.1 canvas之直线绘制



    
在绘制之前必须先从js中获取canvas节点,然后获取canvas内置画笔,画笔分为2d和3d,即平面与立体,对于直线的绘制先从二维入手.如图二:


    
2.1.1 开始绘制需要调用开始路径函数->设置起点->下一个点->终点

            
最后需要闭合路径.当然这样还是不够的,因为没有给闭合后的图形填充颜色.这时候就需要2.1.2的填充函数.
 
     
  注:在每次启用画笔的时候,即调用.beginPath();函数,当绘制的图形完毕的时候记得关闭画笔,即调用.closePath();函数.

图二

2.1.2 在填充这个问题上首先应该区分的是 fill() 和
stroke(),简而言之,fill()用于实心填充,stroke()用于空心填充(描边,为了具有对比性,之后形象说为空心填充).

先说fill():

       
在刚才的代码中如果添加

       
txt.fillStyle = 'yellow';

   
    txt.fill()
;

       
这两行代码,其效果是这样的,如图三:



图三

       
如果加上

       
txt.strokeStyle = 'green';

   
   
txt.stroke();

       
这两行代码,效果是这样的,如图四:



图四

那么,在这里就有一个问题,既然stroke()是用于空心填充,那么填充的默认值是多少?怎么修改填充的值?

       
如果在函数txt.stroke();的上部加上 txt.lineWidth = 5 ;效果如图五:



图五

    
则明显宽度改变,所以可以使用txt.lineWidth = number
;这个属性来调节宽度.那么同理可以找到其默认宽度为1像素.

    
注:该属性只能填写数字类型,数字代表多少像素.
   
 注:部分博友在运行程序的时候发现并不没有出现想要的效果,这就是在js中执行顺序的问题了.注意每次开启画笔函数的时候相当于Photoshop中的图层概念,为了使代码更具有条理性,小编建议一个画笔路径在一次画笔中执行(调用画笔函数和关闭画笔函数成对出现一次为一次画笔,即一个图层);
   
ps:简述图层概念,可以简单理解为一张透明的纸,当多个绘有图案的图层叠在一起就有图案拼凑的效果,所以在执行的时候一定注意顺序问题,有肯能一些本来处于上面的图案被遮盖在图案下方,这时候就需要检查执行顺序了.
 
2.2canvas之圆形绘制
   
在2.1中已经讲过直线的绘制,直线闭合后,使用填充fill();函数可以实现二维的效果,其实点动成线,线动成面,在canvas画布中实现二维的效果也就是线在变化的效果,同理,线动是因为点在动.
2.2.1 绘圆,代码如图6,效果如图7:

图6



图7
 
   
 画圆有专门画圆的函数.arc();也就是说用直线绘制的二维图案是直线闭合填充的效果;而画圆和画矩形是定义起始位置所扫过的面积.在绘制圆的函数中,里面一共需要填写五个参数,即,圆心坐标,x,y值,半径,起始角度,终点角度(注:
在这里角度不能写成字符串的形式,与css里设置角度不同,这里的角度需要用Math.PI函数进行转换,Math.PI
相当于180°),最后一个布尔值就是绘制方向.
 
2.2.2 绘制扇形:代码如图8:

图8

实现的效果如图9:

图9
 
 
 与绘制圆不同的是,绘制圆的时候,定义圆心,绘制的起点在圆上,而扇形不同,归纳来说,绘制扇形是需要三条边参与,而绘制圆只需要一条线即可.所以在绘制扇形的时候需要定义起始位置.
同理,如果想要绘制优弧和劣弧,只需要在圆的基础上改变始末角度即可.(注意方向)
 
2.3 canvas之矩形绘制
 
 
 其实,矩形绘制和圆形绘制几乎一样,只是调用函数不一样.绘制矩形用到的函数是.strokeRect();在括号里需要填写四个参数,即起始位置(矩形左上角),矩形宽,矩形高;
2.4canvas之文字
 
canvas对于文字的绘制与直线和圆形的还不一样,可以简单地理解为对文字的描边,或者填充.通常情况下,绘制文字和渐变搭配,效果更好.代码如图10:
 

图10

效果如图11:

图11

在这里提两点:

1.文字描边与文字填充:
 
 文字描边简单地说就会说空心填充,这里用到一个属性.strokeStyle和一个方法.strokeText(text,x,y,w);其中在方法里需要传入四个参数,即文本,文本起始位置,文本的宽度.
 
 同理,文字填充也用到一个属性和方法,即.fillStyle; .fillText() ;
传入的参数和文字描边一样.
2.文字渐变
 
这里重要的就是文字渐变,首要的问题就是文字渐变是怎么实现的?
 其实,这个和Photoshop中的图层叠加的效果相似,只有在文字边的周围才有颜色,可以简单的理解为在文本的下方绘有一个渐变色的图层,而把文本的边缘掏空,两张图片进行叠加形成的渐变效果.
如果要理解详细的理论,其实是在对应文本边缘的对应位置上填充对应渐变色在这个对应位置上的对应颜色.
其中,渐变的颜色和渐变位置可以用.addColorStop();函数解决,里面需要传入两个参数,一个是位置0-1之间的数字,是相对于宽度的百分比计算的.第二个参数就是渐变的颜色.
2.5canvas之阴影效果
 
 先看代码,如图12:
 

图12
效果如图13:
图13
 
 
 在这里需要我哥属性介入,即阴影的颜色,阴影的偏移量,还有模糊度,这个与css中的box-shadow,text-shadow,这两个属性类似.
注意其实做到这里可以实现一个圆月的效果,即把矩形换成圆形,代码如图14:
 

 图14
效果如图15:

图15
 
3.canvas之canvas变化
 
canvas变化需要提及到平移,旋转,缩放,还有扭曲,为了更好的区分开来,这里只说前三个,最后一个扭曲需要借助于贝瑟尔曲线.
对于canvas的变化本质上不是团在变化,而是canvas在改变,在这里直接三者一起总结,代码如图16:

效果如图17:

图17
对于红色矩形来说,如果定义起始坐标为(0,0),那么出现的位置是在canvas的左上角.这一点毫无疑问.
对于蓝色矩形来说,坐标位置发生了改变,但是蓝色的坐标还是(0,0);只是坐标向右下角平移了.然后蓝色矩形发生了旋转,同理,旋转也是相对与坐标原点,这一点也证明了蓝色的坐标原点发生了改变.

HTML5之canvas细节详谈的更多相关文章

  1. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  3. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  4. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  5. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  6. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  7. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. html5 之 canvas 相关知识(一)概念及定义

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  9. HTML5之Canvas画布

    先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <sc ...

随机推荐

  1. SSMS2008插件开发(3)--部署调试SSMS2008插件

    原文:SSMS2008插件开发(3)--部署调试SSMS2008插件 上一次说到VS2008中的插件开发,最终结果插件是部署在VS2008中,现在我们将插件部署到SSMS2008(Microsoft ...

  2. .NET MVC4 实训记录之四(Unit of work + Repository)

    今日后开启进阶模式! 谈到MVC与EntityFramework,则不得不说一说事务与仓储(Unit of work + Repository). 仓储(Repository):领域对象集合.用于操作 ...

  3. slice、substring、substr的区别

    首先它们都接收两个参数,slice和substring接收的是起始位置与结束位置,而substr接收的是起始位置和所要截取的字符长度.   特殊注意: 当第二参数大于第一个参数时,slice会返回空字 ...

  4. MVC 过滤器1

    ASP.NET MVC 过滤器(一) 前言 前面的篇幅中,了解到了控制器的生成的过程以及在生成的过程中的各种注入点,按照常理来说篇幅应该到了讲解控制器内部的执行过程以及模型绑定.验证这些知识了.但是呢 ...

  5. VS2013 Update 2正式发布 .NET Framework“云优先、移动优先”

    2013 Update 2正式发布 .NET Framework“云优先.移动优先” 投递人 itwriter 发布于 2014-05-13 12:33 评论(19) 有2155人阅读  原文链接   ...

  6. c#跟objective-c语言特性

    c#跟objective-c语言特性的对比 拿c#语言跟objective-c做个对比,记录下自己认为是差不多的东西. 学过objc的人相信对category这个东西肯定不陌生,它可以让我们在没有源码 ...

  7. REST风格的服务

    使用ASP.NET Web Api构建基于REST风格的服务实战系列教程[三]——Web Api入门 系列导航地址http://www.cnblogs.com/fzrain/p/3490137.htm ...

  8. Web Components

    Web Components是不是Web的未来   今天 ,Web 组件已经从本质上改变了HTML.初次接触时,它看起来像一个全新的技术.Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力,可以 ...

  9. c#多选下拉框(ComboBox)

    代码如下 using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawi ...

  10. Oracle常用语句记录

    交集/差集/合集 select * from tb_a intersect minus union all select * from tb_b 条件分支 decode() 例如:搜索条件没有手机就查 ...