不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形。所有其他的图形的绘制都至少需要生成一条路径。不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

canvas提供了三种方法绘制矩形

fillRect(x, y, width, height)  绘制一个填充的矩形;

strokeRect(x, y, width, height)  绘制一个矩形的边框;

clearRect(x, y, width, height)   清除指定矩形区域,让清除部分完全透明。

x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。width和height设置矩形的尺寸。

例如画个矩形:

<canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//绘制矩形
ctx.fillRect(100,100,200,200);
ctx.clearRect(150,150,100,100);
ctx.strokeRect(160,160,80,80);
</script>

fillRect()函数绘制了一个边长为200px的黑色正方形。clearRect()函数从正方形的中心开始擦除了一个100*100px的正方形,接着strokeRect()在清除区域内生成一个80*80的正方形边框。效果图:

绘制路径

使用路径绘制图形需要一些额外的步骤。首先,需要生成路径。然后再路径上使用绘图命令绘制。之后闭合路径。一旦路径生成,你就能通过描边或填充路径来渲染图形。以下是所要用到的函数:

beginPath()
新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。
closePath()
闭合路径之后图形绘制命令有重新指向到上下文中。
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成图形。
生成路径的第一步叫做beginPath()。本质上,路径是由很多子路径构成,这些子路径都是在一个列表中,所有的子路径(线、矩形、等等)构成图形。而每次这个方法调用之后,列表清空重置,然后我们就可以重新绘制新的图形。

注意:当前路径为空,即调用beginPath()之后,或者canvas刚建的时候,第一条路径构造命令通常被视为是moveTo(),无论最后的是什么。出于这个原因,你几乎总是要在设置路径之后专门指定你的起始位置。
第二步就是调用函数指定绘制路径,等下回简单介绍。

第三,就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的,即当前点为开始点,该函数什么也不做。

注意:当你调用fill()函数时,所有没有闭合的形状都会自动闭合,所以你不需要调用closePath()函数。而这并不是stroke()所具有的。

例如,绘制三角形的代码如下:

<canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); ctx.beginPath();//开始一个路径
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineTo(300,300);
ctx.closePath();//闭合路径
ctx.fill();
</script>

圆形的绘制

arc(x,y,r,sa,ea,true/false):x、y为圆心坐标,r为半径,sa、ea分 别为起始角度和结束角度,最后一个参数为true时,顺时针画圆,false 则逆时针画圆

<canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(200,200,100,0,Math.PI*2,false);
ctx.stroke();
</script>

贝塞尔曲线:

quadraticCurveTo (kx,ky,ex,ey) :二次贝塞尔曲线,一个控制点,一个终点。

bezierCurveTo (kx1,ky1,kx2,ky2,ex,ey) :三次贝塞尔曲线,两个控制点,一个终点。

什么是控制点,如图:

二次贝塞尔曲线

这个例子使用多个贝塞尔曲线来渲染对话框。

<canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
</script>

效果图:

三次贝塞尔曲线

这个例子使用贝塞尔曲线绘制心形。

<canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
</script>

效果图:

基本图形绘制就这样了,我不会很详细地讲解上面的代码,因为事实上这很容易理解。

H5 认识canvas的更多相关文章

  1. h5标签canvas关于getImageData跨域的问题

    h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

  2. 关于h5绘制canvas生成图片的注意点!

    1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...

  3. 关于H5的Canvas

    1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...

  4. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  5. H5使用Canvas绘图

    一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...

  6. 用H5的canvas做时钟

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>D ...

  7. H5标签-canvas实现颜色拾取功能

    HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...

  8. H5之canvas简单入门

    <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 <canv ...

  9. H5的canvas绘图技术

    canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果. 1 ...

随机推荐

  1. MySQL 5.6 双机热备

    目录: 1.说明 2.数据手工同步 3.修改主数据库配置文件 4.修改从数据库配置文件 5.主数据库添加备份用户 6.从数据库设置为Slave 7.验证 1.说明   1)数据库版本要高于5.1 2) ...

  2. 原生Ajax讲解

    典型的http通信:浏览器向服务器发出请求,服务器向客户端返回响应,浏览器重新加载页面,这种不连续的页面加载方式导致用户的体验变得杂乱,缺乏连贯性. 如: 在一般的web应用程序中,用户填写表单字段然 ...

  3. 基础笔记5(file)

    file 可以是目录和文件(只是是java程序与系统的文件进行一种关联) File file1 = new File("f:/mytest", "test5.txt&qu ...

  4. 学习mongo系列(六)limit(munber),skip(number)

    > db.user.find().pretty(){ "_id" : ObjectId("56946fba3a18f4867aecbcd1"), &quo ...

  5. JavaScript学习笔记及知识点整理_3

    1.js的事件冒泡及阻止方法:事件冒泡的概念:在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事 ...

  6. 20160908_Redis主从复制Replication

    1.主从redis,安装配置都是一样的.下面开始从服务器的配置. 参考的网址为:http://yanliu.org/2015/08/27/Redis%E4%B8%BB%E4%BB%8E%E5%A4%8 ...

  7. mousedown(function(){ return false; })作用

    mousedown(function(){ return false;});  阻止浏览器的默认行为.  比如a你加个空连接,可能会在当前页跳转, 你加了这句,就可以阻止a跳转,然后只执行js函数的代 ...

  8. html5的spellcheck属性(拼写、文法检查)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. Linux服务器数据库的导入和导出

    一.导出: 用mysqldump命令行 命令格式 mysqldump -u 用户名 -p 数据库名 > 数据库名.sql 范例: mysqldump -u root -p abc > ab ...

  10. 关于CSS3线型渐变这些事儿

    CSS3兼容各浏览器的线型渐变方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...