当前位置 : IT培训网 > Web前端 > Web教程 > 如何用HTML5 Canvas定义图形

如何用HTML5 Canvas定义图形

时间：2016-12-06 15:09:58  来源：web前端培训网  作者：IT培训网  已有：名学员访问该课程
标签(Tag):   html5(196)HTML5Canvas(4)如何用HTML5(1)
漂亮的页面是有多种元素组成的，而这些元素需要我们认真学习及熟练应用之后才可以展现给用户，如果你在学习网页设计或者已经是网页设计的一员了，那么赶紧加入我们吧，学习更多html5知识，做漂亮的网页尽在IT培训网

在网页中插入图片很容易，可用代码来制作图片你会吗，也许你不信，如果你使用了HTML5，这些图片就可以轻松的解决了，你想来学学吗，赶紧随着IT培训网小编一起来学习下吧！

HTML5 Canvas

<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

如何用HTML5 Canvas定义图形_www.itpxw.cn

什么是 Canvas?

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

浏览器支持

表格中的数字表示支持 <canvas> 元素的第一个浏览器版本号。

如何用HTML5 Canvas定义图形_www.itpxw.cn

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个 <canvas> 元素.

使用 style 属性来添加边框:

实例

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网（www.itpxw.cn）</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

</body>

</html>

运行结果：

 

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

 

实例

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网（www.itpxw.cn）</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

运行结果：

如何用HTML5 Canvas定义图形_www.itpxw.cn

实例解析:

首先，找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

坐标实例

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。

如何用HTML5 Canvas定义图形_www.itpxw.cn

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法，就像stroke().

实例

定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条:

如何用HTML5 Canvas定义图形_www.itpxw.cn

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网（www.itpxw.cn）</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

</body>

</html>

运行结果：

如何用HTML5 Canvas定义图形_www.itpxw.cn

在canvas中绘制圆形, 我们将使用以下方法:

  • arc(x,y,r,start,stop)

实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().

实例

使用 arc() 方法 绘制一个圆:

如何用HTML5 Canvas定义图形_www.itpxw.cn

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网（www.itpxw.cn）</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>

</body>

</html>

运行结果：

如何用HTML5 Canvas定义图形_www.itpxw.cn

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

  • font - 定义字体
  • fillText(text,x,y) - 在 canvas 上绘制实心的文本
  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText():

实例

使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：

 

 

Hello World

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网（www.itpxw.cn）</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

</script>

</body>

</html>

运行结果：

Hello World

 

使用 strokeText():

实例

使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：

如何用HTML5 Canvas定义图形_www.itpxw.cn

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网（www.itpxw.cn）</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.strokeText("Hello World",10,50);

</script>

</body>

</html>

运行结果：

如何用HTML5 Canvas定义图形_www.itpxw.cn

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

  • createLinearGradient(x,y,x1,y1) - 创建线条渐变
  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

实例

创建一个线性渐变。使用渐变填充矩形:

如何用HTML5 Canvas定义图形_www.itpxw.cn

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网（www.itpxw.cn）</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// Create gradient

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

运行结果：

如何用HTML5 Canvas定义图形_www.itpxw.cn

使用 createRadialGradient():

实例

创建一个径向/圆渐变。使用渐变填充矩形：

如何用HTML5 Canvas定义图形_www.itpxw.cn

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网（www.itpxw.cn）</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// Create gradient

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

运行结果：

如何用HTML5 Canvas定义图形_www.itpxw.cn

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

  • drawImage(image,x,y)

使用图像:

如何用HTML5 Canvas定义图形_www.itpxw.cn

实例

把一幅图像放置到画布上:

 

如何用HTML5 Canvas定义图形_www.itpxw.cn
 

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

HTML <canvas> 标签

Tag 描述
<canvas> HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

漂亮的页面是有多种元素组成的，而这些元素需要我们认真学习及熟练应用之后才可以展现给用户，如果你在学习网页设计或者已经是网页设计的一员了，那么赶紧加入我们吧，学习更多html5知识，做漂亮的网页尽在IT培训网

 

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
分享到：QQ空间新浪微博腾讯微博人人网微信
------分隔线----------------------------

大话IT

Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频（Videos）播放