web前端|html教程
Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形
web前端-html教程
来源：/968.html
androidN 源码,vscode打不开一些网页,ubuntu 休眠 禁止,tomcat配置不出现猫,爬虫selenium翻页,php框架 多语言,十堰计算机seo推广lzw
A、Canvas的基础知识
yy论坛源码,宏碁蜂鸟安装ubuntu,奇妙的爬虫伙伴,php做一个生产管理系统,网站seo招商lzw
Canvas是HTML 5中新增的元素，专门用于绘制图形。canvas元素就相当于一块“画布”，一块无色的透明区域，需要利用JavaScript编写在其中进行绘画的脚本。
汽车服务商城源码,在vscode无法npm,ubuntu查找串口,tomcat如何不缓存,502爬虫,php 发送udp,珠海谷歌seo营销公司,cms网站asp源码下载,模板加后台lzw
在页面放置canvas元素很简单，利用标签，同时指定几个基本的属性：id,width和height。接下来通过几个小案例，跟我入门canvas吧~~~^_^~~~
B、Canvas小案例（测试结果来自Google最新版本）
1、绘制矩形
canvas.html:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
canvas元素学习
11:
12:
13:
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 = ed;
16:// 设置边框的样式
17:context.strokeStyle = lue;
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 = gba(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 = ed;
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 = gb(100,255,100);
19:context.strokeStyle = gb(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 = gb(100,255,100);
19:context.strokeStyle = gb(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入门（2）:图形渐变和图像形变换
