Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形
来源：http://www.ido321.com/968.html
一、Canvas的基础知识
Canvas是HTML 5中新增的元素，专门用于绘制图形。canvas元素就相当于一块“画布”，一块无色的透明区域，需要利用JavaScript编写在其中进行绘画的脚本。
在页面放置canvas元素很简单，利用<canvas>标签，同时指定几个基本的属性：id,width和height。接下来通过几个小案例，跟我入门canvas吧~~~^_^~~~
二、Canvas小案例（测试结果来自Google最新版本）
1、绘制矩形
canvas.html:
1: <!DOCTYPE >
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>canvas元素学习</title>
6: <script type="text/javascript" src="canvas.js">
7: </script>
8: </head>
9: <body>
10: <h3>canvas元素学习</h3>
11: <canvas id="canvas" width="400" height="300"></canvas>
12: </body>
13: </html>
canvas.js:
1: window.onload=function()
2: {
3: // 获取canvas 的ID
4: var canvas = document.getElementById('canvas');
5: if (canvas == null)
6: {
7: return false;
8: }
9: // 获取上下文
10: var context = canvas.getContext('2d');
11: // 设置填充的样式
12: context.fillStyle = "#eeeeff";
13: // 绘制矩形,以fillStyle填充，fillRect（strokeRect）前两个参数是矩形左上角位置,后两个参数分别是宽和高
//默认原点是canvas的左上角
14: context.fillRect(0,0,400,300);
15: context.fillStyle = 'red';
16: // 设置边框的样式
17: context.strokeStyle = 'blue';
18: // 设置边框大小
19: context.lineWidth = 2;
20: context.fillRect(50,50,100,100);
21: // 绘制矩形边框
22: context.strokeRect(50,50,100,100);
23: }
效果：
2、绘制圆形：使用路径绘制
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas');
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d');
9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: for(var i = 0; i<9; i++)
14: {
15: // 创建路径
16: context.beginPath();
17: // 绘制圆形路径
18: context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);
19: // 关闭路径，如果不关闭，则图像会重叠
20: context.closePath();
21: context.fillStyle = 'rgba(255,0,0,0.25)';
22: // 以fillStyle填充
23: context.fill();
24: }
arc()绘制圆弧，其参数如下
arc(x,y,radius,startAngle,endAngle,anticlockwise):x,y 是圆弧的圆心位置，radius是半径，startAngle和endAngle是起始和结束的角度，单位是弧度（度数必须转为弧 度），anticlockwise是一个布尔值，true表示顺时针绘制图像，false表示逆时针绘制。起始角度是0，结束角度是360（PI*2）就 可以绘制圆形。
效果：
3、绘制直线
绘制直线用到moveTo()和lineTo()两个方法
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas');
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d');
9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: context.beginPath();
//参数线的起点坐标
14: context.moveTo(50,50);
//参数线的终点坐标
15: context.lineTo(100,100);
16: context.closePath();
//关闭路径之后绘制图形
17: context.strokeStyle = 'red';
18: context.stroke();
效果：
绘制一个复杂点的
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas');
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d');
9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: var dx = 150;
14: var dy = 150;
15: var s = 100;
16: // 创建路径
17: context.beginPath();
18: context.fillStyle = 'rgb(100,255,100)';
19: context.strokeStyle = 'rgb(0,0100)';
20: var x = Math.sin(0);
21: var y = Math.cos(0);
22: var dig = Math.PI/15 *11;
23: for (var i = 0; i < 30; i++) {
24: var x = Math.sin(i * dig);
25: var y = Math.cos(i * dig);
26: context.lineTo(dx+x*s,dx+y*s);
27: }
28: context.closePath();
29: context.fill();
30: context.stroke();
效果：
4、绘制曲线：利用bezierCurveTo绘制贝济埃曲线
bezierCurveTo可以绘制曲线，是lineTo的曲线版本
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas');
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d');
9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: var dx = 150;
14: var dy = 150;
15: var s = 100;
16: // 创建路径
17: context.beginPath();
18: context.fillStyle = 'rgb(100,255,100)';
19: context.strokeStyle = 'rgb(0,0100)';
20: var x = Math.sin(0);
21: var y = Math.cos(0);
22: var dig = Math.PI/15 *11;
23: context.moveTo(dx,dy);
24: for (var i = 0; i < 30; i++) {
25: var x = Math.sin(i * dig);
26: var y = Math.cos(i * dig);
27: context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
28: }
29: context.closePath();
30: context.fill();
31: context.stroke();
效果
Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形的更多相关文章
- Canvas入门04-绘制矩形
使用的API: ctx.strokeRect(x, y, width, height) 给一个矩形描边 ctx.fillRect(x, y, width, height) 填充一个矩形 ctx.cle ...
- Android中使用Canvas和Paint绘制一个安卓机器人
场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...
- IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)
... 首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Con ...
- (转) IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)
首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context ...
- [置顶] IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)
首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context ...
- canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线
[上篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果
绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...
- canvas教程(二) 绘制直线
经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...
- canvas教程(三) 绘制曲线
经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...
随机推荐
- ADO,OLEDB,ODBC,DAO的区别
ADO NET OLEDB ODBC连接数据库的区别 http://www.doc88.com/p-976312043296.html http://blog.csdn.net/ithomer/art ...
- [iOS]修改开发者中心Bundle Identifier的一些配置
登录开发者中心https://developer.apple.com 然后找到你的Bundle Identifier. 这里暂时只讲开启推送的功能,如果需要别的直接勾选前面的选择框 然后拉到最下面点击 ...
- MSSQL2005数据库自动备份问题（到同一个局域网上的另一台电脑上）
有A数据库服务器,B本机: 我现在想通过在B机器上通过代码调用SQL来执行A数据库的备份到B机器上 调用的SQL语句为:Backup Database MYDATABASE To Disk ...
- C++：类的成员函数定义方式
1.成员函数的第一种定义方式:在类声明中只给出成员函数的原型,而将成员函数的定义 放在类的外部. 返回值类型 类名::成员函数名(参数表) { 函数体 } class Point{ pub ...
- phantomjs使用说明
phantomjs使用说明 12条评论 phantomjs实现了一个无界面的webkit浏览器.虽然没有界面,但dom渲染.js运行.网络访问.canvas/svg绘制等功能都很完备,在页面抓取. ...
- hadoop拾遗（二）---- 文件模式
在单个操作中处理一批文件,这是一个常见的要求.举例来说,处理日志的MapReduce作业可能需要分析一个月内包含在大量目录中的日志文件.在一个表达式中使用通配符来匹配多个文件是比较方便的,无需列举第个 ...
- bat拷贝文件
最近在部署服务器的时候,需要用到把一个站点文件拷贝到其他站点.一个一个手动copy太累人了,写了个简单的批处理文件,基本能达到目的,具体怎么做呢: 1.把需要拷贝到各个站点的文件,单独放到一个目录下. ...
- C# 计时器的三种使用方法
在.net中有三种计时器,一是System.Windows.Forms命名空间下的Timer控件,它直接继承自Componet;二是System.Timers命名空间下的Timer类. Timer控件 ...
- Java Swing中Substance个人比较喜欢的两种组合
try { // 设置外形装饰为可装饰 JFrame.setDefaultLookAndFeelDecorated(true); // 设置外观 UIManager.setLookAndFeel(ne ...
- Android应用程序中应用图标和名字的设置
在AndroidManifest.xml文件中设android:icon和 android:label指定名字和图标的位置,如: <application android:icon=" ...