Canvas绘图API Demos

上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的其他API:绘制线条、绘制椭圆、绘制图片、图片处理等...如果想获得更好的阅读效果请点击老马的独立博客地址

一、Canvas绘制线条

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

                        
<body>
<canvas id="demoCanvas" width="500" height="600">
</canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
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设置字体、大小、样式(写法类似与CSS的font属性)。与此类似的还有strokeText方法,用来添加空心字。另外注意一点:fillText方法不支持文本断行,即所有文本出现在一行内。所以,如果要生成多行文本,只有调用多次fillText方法。

以下是代码Demo:

                        
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
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和endAngle则是扇形的起始角度和终止角度(以弧度表示),anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)。

以下是绘制图形的Demo:


<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
context.beginPath();//开始绘制路径
//绘制以 (60,60)为圆心,50为半径长度,从0度到360度(PI是180度),最后一个参数代表顺时针旋转。
context.arc(60, 60, 50, 0, Math.PI * 2, true);
context.lineWidth = 2.0;//线的宽度
context.strokeStyle = "#000";//线的样式
context.stroke();//绘制空心的,当然如果使用fill那就是填充了。
</script>

还不赶快动手试一下?

四、Canvas绘制图片

Canvas绘制图片应该是他的一大特点或者是亮点吧。当然配合File的API,让JS变得无可匹敌。那接下里给大家演示一下怎样绘制图片,并且做出一个立体效果出来。

以下是绘制图片的Demo:


<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
var image = new Image();//创建一张图片
image.src = "Images/a.png";//设置图片的路径
image.onload = function() {//当图片加载完成后
for (var i = 0; i < 10; i++) {//输出10张照片
//参数:(1)绘制的图片 (2)坐标x,(3)坐标y
context.drawImage(image, 100 + i * 80, 100 + i * 80);
}
};
</script>

还不赶快动手试一下?

五、总结

Canvas总算介绍了最基本的用法了。当然本文大量借鉴了其他网站的例子。作者也是把最基本的精华部分罗列了一下。总体来说Canvas绘制图片和文本、形状都不是很难,API代码上手难度基本就是初级。但是由此而带来的非常多的可能,让Html5真正的强大到无可比拟的地步。

当然本文并没有涉及到Canvas3D绘制的相关内容,而且关于Canvas绘制渐变色、绘制阴影、图片的相关处理操作等,这些内容,如果读者确实需要的可以自行搜索查找相关资料或者直接阅读Html5的最新标准文档。

本文参考:http://javascript.ruanyifeng.com/htmlapi/canvas.html

Html5 学习系列(五)Canvas绘图API快速入门(2)的更多相关文章

  1. Html5 学习系列(五)Canvas绘图API快速入门(1)

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

  2. 引言:Canvas绘图API快速入门

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

  3. [HTML5] 飞龙天惊-HTML5学习系列

    飞龙天惊 cnblog URL:http://www.cnblogs.com/fly_dragon/ Html5 学习系列(一)认识HTML5 http://www.cnblogs.com/fly_d ...

  4. Html5 学习系列(四)文件操作API

    原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...

  5. Html5学习系列

    Html5学习系列 HTML5 规定了一种通过 video 元素来包含视频的标准方法 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.26 ...

  6. scrapy爬虫学习系列五:图片的抓取和下载

    系列文章列表: scrapy爬虫学习系列一:scrapy爬虫环境的准备:      http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_python_00 ...

  7. canvas绘图API详解

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

  8. Node.js API快速入门

    Node.js API 快速入门 一.事件EventEmitter const EventEmitter = require('events'); class MyEmitter extends Ev ...

  9. [易学易懂系列|rustlang语言|零基础|快速入门|(28)|实战5:实现BTC价格转换工具]

    [易学易懂系列|rustlang语言|零基础|快速入门|(28)|实战5:实现BTC价格转换工具] 项目实战 实战5:实现BTC价格转换工具 今天我们来开发一个简单的BTC实时价格转换工具. 我们首先 ...

随机推荐

  1. 关于sql注入

    删除表,先猜表名,可以使用下面的语名: Select * from A where A.a = ‘testdata’; drop table A---’; If a field only allow ...

  2. spark hive 结合处理 把多行变成多列

    原数据格式 : gid       id      score a1        1       90 a1        2      80 a1       3      79 a1       ...

  3. Spring 4集成 Quartz2(转)

    本文将演示如何通过 Spring 使用 Quartz Scheduler 进行任务调度.Spring 为简化 Quartz 的操作提供了相关支持类.本文示例使用的相关工具如下: Spring 4.2. ...

  4. css 中 list-style-image:

    用于设置<a>标签的默认格式的背景图片

  5. SQLServer2008R2 mdf文件还原数据库

    偶然遇到要用mdf文件restore数据库,试了2个小时才弄出来,百度查出来的我试了都不太好用,或者是我没理解. 下面把我用的记录一下,以防忘记. 工具:SQLServer 2008R2 步骤: 1. ...

  6. 超链接的那些事(二): 属性href

    a标签的属性之一 href 1. 定义 href 属性用于指定超链接目标的 URL. 2. 用法     ①. 锚点 同一页面添加锚点 (1)<a href="#test"& ...

  7. 读取当前键值,并赋值给LED

    /********************************* 代码功能:读取当前键值,并赋值给LED 使用函数: digitalRead(数字输入端口号); 创作时间:2016*10*07 作 ...

  8. 技术英文单词贴--W

    W widget 小工具,小部件

  9. 回忆读windows 核心编程

    看<windows 核心编程> 第五版到纤程了,下一章节即将介绍内存体系编程.如果做window平台下的开发,我感觉此书一定要读.记得开始讲解了window的基础,然后讲解内核对象.内核对 ...

  10. php包含(include/require)文件时的作用域

    当一个php脚本被require/include时,他的变量作用域根据其上下文环境决定. 1.如果是在一个函数中require/include一个文件,则此文件中的变量作用域是这个函数的范围.也就是说 ...