Canvas就是一个画布，可以进行任何的线、图形、填充等一系列的操作。

　　Canvas的Context对象

　要使用Canvas来绘制图形必须在页面中添加Canvas的标签

　<canvas id="canvasDemo" width="400" height="400">

　　<p>请使用支持html5的浏览器查看实例</p>

　</canvas>

　id是必须的，js要用id来那当前的Canvas的Dom对象。通过次Cancas的Dom对象就可以获取它的上下文(Context)。

　<script type="text/javascript">

　　var canvasDom = document.getElementById("canvaDemo");

　　var context = canvasDom.getContext('2d');

　</script>

　Context上下文默认两种绘制方式：绘制线(stroke)或填充(fill)。

　　Canvas绘制步骤：创建HTML页面，设置画布标签。编写js，获取画布dom对象。通过canvas标签的dom对象获取上下文。设置绘制样式、颜色。绘制矩形或填充矩形。

　<body>

　　<canvas id="canvasDemo" width="500" height="500">

　　　　<p>请使用支持HMTL5的浏览器查看本实例</p>

　　</canvas>　

　　<script type="text/javascript">

　　　　var canvasDom = document.getElementById("canvasDemo");

　　　　var context = canvas.getContext('2d');

　　　　context.strokeStyle="red";

　　　　context.stroke.Rect(10,10,190,100);

　　　　context.fillStyle="blue";

　　　　context.fillRect(110,110,100,100);

　　</script>

　</body>

　　Canvas绘制线条

　Context对象的beginPath方法表示开始绘制路径，moveTo(x,y)方法设置线段的起点，lineTo(x,y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法。

　<body>

　　<canvas id="canvasDemo" width="500" height="500" />

　　<script type="text/javascript">

　　　　var canvasDom = document.getElementById("canvasDemo");

　　　　var context = canvasDom.getContext("2d");

　　　　context.beginPath();   //开始路径绘制

　　　　context.moveTo(20, 20);  //设置路径起点 坐标为(20, 20)

　　　　context.lineTo(200, 200);  //绘制一条到(200,20)的直线

　　　　context.lineTo(400, 20);

　　　　context.closePath();

　　　　context.lineWidth = 2.0;  //设置线宽

　　　　context.strokeStyle = "#CC0000";   //设置线条颜色

　　　　context.stroke();  //对颜色进行着色，此时线条才可见

　　</script>

　</body>

　　

　　Canvas绘制文本

　Context上下文对象的fillText(string x, y)方法是用来绘制文本。他的三个参数分别为文本内容、起点的x坐标，y坐标。使用之前，需用font设置文本、大小、样式。strokeText方法用来添加空心字。fillText方法不支持文本断行，即所有文本出现在一行。若要生成多行文本，只有调用多次fillText方法。

　<canvas id="canvasDemo" width="500" height="500" />

　<script type="text/javascript">

　　　var canvas = document.getElementById("canvasDemo");

　　　var context = canvasDom.getContext("2d");

　　　context.moveTo(200, 200);

　　　context.font = "Bold 50px Arial";

　　　context.textAlign = "left";

　　　context.fillStyle = "#005600";

　　　context.fillText("哈哈", 10, 50);

　　　context.strokeText("blog.itjeek.com", 10, 100);

　</script>

　　Canvas绘制图形和椭圆

　Context的arc方法就是绘制原形或椭圆，arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAnlge则是扇形的起始角度和终止角度，anticlockwise表示做图形时是逆时针(true)还是顺时针(false)。

　<canvas id="canvasDemo" width="500" height="500" />

　<script type="text/javascript">

　　　var canvasDom =  document.getElementById("canvasDemo");

　　　var context = canvasDom.getContext("2d");

　　　context.beginPath();

　　　context.arc(60, 60, 50 , 0, Math.PI * 2, true);

　　　context.lineWidth = 2.0;

　　　context.strokeStyle = "#000";

　　　context.stroke();

　</script>

　　Canvas绘制图片

　<canvas id="canvasdemo" height="500" width="500"  />

　<script type="text/javascript">

　　var canvasDom = document.getElementById("canvasDemo");

　　var context = canvasDom.getContext("2d");

　　var image = new Image();

　　image.src = "images/a.png";

　　image.onload = function(){

　　　　for(var i = 0 ; i < 10 ; i++){　　

　　　　　　context.drawImage(image, 100+i*80, 100+i*80);

　　　　}

　　};

　</script>

Canvas绘图API的更多相关文章

  1. Html5 学习系列（五）Canvas绘图API快速入门（2）

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  2. Html5 学习系列（五）Canvas绘图API快速入门（1）

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  3. 引言：Canvas绘图API快速入门

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  4. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  5. canvas 绘图api的位置问题

    很久没碰canvas了,今天因为canvas绘图的为之问题浪费了一些时间. 我们知道canvas的默认宽高是300X150嘛. 实际使用的时候当然是自定义一个高宽啦. 通常我们会习惯性地在js中通过c ...

  6. 有趣的Javascript：只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图（有演示demo）

    该demo支持IE5以上任意内核的浏览器 查看演示demo:支持IE5以上版本的浏览器Canvas绘图demo 补充:chats.js和echarts等图表库也可以使用本方法兼容IE6以上浏览器 1. ...

  7. HTML5 学习总结（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  8. canvas绘图、WebGL、SVG

    目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...

  9. HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

随机推荐

  1. Qt之自定义控件（开关按钮）

    简述 接触过IOS系统的童鞋们应该对开关按钮很熟悉,在设置里面经常遇到,切换时候的滑动效果比较帅气. 通常说的开关按钮,有两个状态:on.off. 下面,我们利用自定义控件来实现一个开关按钮. 简述 ...

  2. iOS App从点击到启动

    程序启动之前 从exec()开始 main()函数是整个程序的入口,在程序启动之前,系统会调用exec()函数.在Unix中exec和system的不同在于,system是用shell来调用程序,相当 ...

  3. groovy基础

    字符串字面值 def age=25 log.info 'My age is ${age}' log.info "my age is \${age}" log.info " ...

  4. Objective-C：@class和#import

    @class和#import是OC中引用一个类的两种方式,其区别在于: #import相当于把被引用文件的内容拷贝到目标文件,这会包含被引用类的所有信息,包括被引用类的变量和方法(会降低编译性能 ): ...

  5. class、interface、struct的区别

    1 struct和class有什么区别 1.1默认的继承访问权限 Struct是public的,class是private的. 你可以写如下的代码: struct A { char a; }; str ...

  6. C#多态问题

    为什么对这个感觉趣呢.因为以前写过两篇关于这个多态和重载混合起来很乱的调用情况分析,自从哪以后,我自认为随便乱写一些继承多态的代码都应该难不到我.但是今天看到一段代码有一个地方计算错误了,所以有必要写 ...

  7. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  8. JBOss启动只能在本机访问的解决办法

    环境CentOS6.4_X64 JBoss:5.1.2 eap 启动:JBOSS_HOME/bin/run.sh 在本机可以通过http://localhost:8080访问,而其他机器无论是通过机器 ...

  9. visio画UML用例图没有include关系的解决方法

    今天用Microsoft Visio画用例图时,发现visio UML用例里面找不到include关系,即“箭头”+“<>” 这个组件,后来终于发现一个可行的解决办法: 首先:打开Micr ...

  10. java 面向对象编程--第十章 接口

    1.  接口可以看做是抽象类的特例.抽象类中可以定义抽象方法,也可以定义具体方法.但接口只能定义抽象方法.所有接口可以看作行为的抽象.定义接口使用关键字interface,实现接口使用关键字imple ...