您的位置：首页 > Web前端 > HTML5

HTML5学习笔记-canvas 标签

2015-05-12 10:37 661 查看

HTML5
是 W3C 与 WHATWG 合作的结果，其中，W3C
指 World Wide Web Consortium，万维网联盟；WHATWG
指 Web Hypertext Application Technology Working Group。

HTML5
中的一些有趣的新特性：canvas
、video
、audio
、article、footer、header、nav、section、 calendar、date、time、email、url、search等，后面将以例子的方式简单介绍一下HTML5中一些比较有意思的新特性。

首先我们介绍一下canvas标签：

1、canvas
标签

canvas
（画布）标签主要是定义图形，比如图表和其他图像。可以利用此标签画出一些精美的图画。

1.1 直线、圆

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

1. moveTo(x,y) 定义线条开始坐标

2. lineTo(x,y) 定义线条结束坐标

html:
<!DOCTYPE HTML>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>

</body>

</html>

js：

<script
type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

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

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

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

1.2 曲线

JavaScript 代码：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
// line color
context.strokeStyle = 'orange';
context.stroke();

quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。

1. 开始点：moveTo(188,150)

2. 控制点：quadraticCurveTo(288, 0,
388, 150);

3. 结束点：quadraticCurveTo(288, 0, 388, 150)

1.3 渐变

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

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

1. createLinearGradient(x,y,x1,y1) - 创建线条渐变

2. createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

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

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

使用渐变，设置fillStyle或strokeStyle的值为
渐变，然后绘制形状。

其中：strokeStyle是设置图形轮廓（边框）的颜色，fillStyle是设置图形填充（边框以内）的颜色。

1.4 图像

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

drawImage(image,x,y)

image为图像的对象，例如：var
img=document.getElementById("scream");
x、y表示图像展示的起始位置。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航