您的位置：首页

Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形

2017-05-24 11:39 483 查看
来源：http://www.ido321.com/968.html

一、Canvas的基础知识

Canvas是HTML 5中新增的元素，专门用于绘制图形。canvas元素就相当于一块“画布”，一块无色的透明区域。须要利用JavaScript编写在当中进行绘画的脚本。

在页面放置canvas元素非常easy。利用<canvas>标签。同一时候指定几个主要的属性：id,width和height。接下来通过几个小案例，跟我入门canvas吧~~~^_^~~~

二、Canvas小案例（測试结果来自Google最新版本号）

1、绘制矩形

canvas.html:

[code] <!DOCTYPE >

<html>

<head>

<meta charset="utf-8">

<title>canvas元素学习</title>

<script type="text/javascript" src="canvas.js">

</script>

</head>

<body>

<h3>canvas元素学习</h3>

<canvas id="canvas" width="400" height="300"></canvas>

</body>

</html>

[/code]

canvas.js:

[code] window.onload=function()

{

// 获取canvas 的ID

var canvas = document.getElementById('canvas');

if (canvas == null)

    {

return false;

}

// 获取上下文

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

// 设置填充的样式

context.fillStyle = "#eeeeff";

// 绘制矩形,以fillStyle填充。fillRect（strokeRect）前两个參数是矩形左上角位置,后两个參数各自是宽和高

//默认原点是canvas的左上角

context.fillRect(0,0,400,300);

context.fillStyle = 'red';

// 设置边框的样式

context.strokeStyle = 'blue';

// 设置边框大小

context.lineWidth = 2;

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

// 绘制矩形边框

context.strokeRect(50,50,100,100);

}

[/code]

效果：



2、绘制圆形：使用路径绘制

[code] // 获取canvas 的ID

var canvas = document.getElementById('canvas');

if (canvas == null)

    {

return false;

}

// 获取上下文

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

// 设置填充的样式

context.fillStyle = "#eeeeff";

// 绘制矩形,以fillStyle填充

context.fillRect(0,0,400,300);

for(var i = 0; i<9; i++)

    {

// 创建路径

context.beginPath();

// 绘制圆形路径

context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);

// 关闭路径。假设不关闭，则图像会重叠

context.closePath();

context.fillStyle = 'rgba(255,0,0,0.25)';

// 以fillStyle填充

context.fill();

}

[/code]

arc()绘制圆弧。其參数例如以下

arc(x,y,radius,startAngle,endAngle,anticlockwise):x,y是圆弧的圆心位置，radius是半径，startAngle和endAngle是起始和结束的角度，单位是弧度（度数必须转为弧度），anticlockwise是一个布尔值，true表示顺时针绘制图像。false表示逆时针绘制。起始角度是0。结束角度是360（PI*2）就能够绘制圆形。

效果：



3、绘制直线

绘制直线用到moveTo()和lineTo()两个方法

[code] // 获取canvas 的ID

var canvas = document.getElementById('canvas');

if (canvas == null)

    {

return false;

}

// 获取上下文

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

// 设置填充的样式

context.fillStyle = "#eeeeff";

// 绘制矩形,以fillStyle填充

context.fillRect(0,0,400,300);

context.beginPath();

//參数线的起点坐标

context.moveTo(50,50);

//參数线的终点坐标

context.lineTo(100,100);

context.closePath();

//关闭路径之后绘制图形

context.strokeStyle = 'red';

context.stroke();

[/code]

效果：



绘制一个复杂点的

[code] // 获取canvas 的ID

var canvas = document.getElementById('canvas');

if (canvas == null)

    {

return false;

}

// 获取上下文

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

// 设置填充的样式

context.fillStyle = "#eeeeff";

// 绘制矩形,以fillStyle填充

context.fillRect(0,0,400,300);

var dx = 150;

var dy = 150;

var s  = 100;

// 创建路径

context.beginPath();

context.fillStyle = 'rgb(100,255,100)';

context.strokeStyle = 'rgb(0,0100)';

var x = Math.sin(0);

var y = Math.cos(0);

var dig = Math.PI/15 *11;

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

var x = Math.sin(i * dig);

var y = Math.cos(i * dig);

context.lineTo(dx+x*s,dx+y*s);

}

context.closePath();

context.fill();

 context.stroke();

[/code]

效果：



4、绘制曲线：利用bezierCurveTo绘制贝济埃曲线

bezierCurveTo能够绘制曲线，是lineTo的曲线版本号

[code] // 获取canvas 的ID

var canvas = document.getElementById('canvas');

if (canvas == null)

    {

return false;

}

// 获取上下文

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

// 设置填充的样式

context.fillStyle = "#eeeeff";

// 绘制矩形,以fillStyle填充

context.fillRect(0,0,400,300);

var dx = 150;

var dy = 150;

var s  = 100;

// 创建路径

context.beginPath();

context.fillStyle = 'rgb(100,255,100)';

context.strokeStyle = 'rgb(0,0100)';

var x = Math.sin(0);

var y = Math.cos(0);

var dig = Math.PI/15 *11;

context.moveTo(dx,dy);

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

var x = Math.sin(i * dig);

var y = Math.cos(i * dig);

context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);

}

context.closePath();

context.fill();

 context.stroke();

[/code]

效果



下一篇：Canvas入门（2）:图形渐变和图像形变换
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航