HTML5学习笔记-canvas 标签

最新推荐文章于 2023-06-09 11:35:33 发布

Jesse-He

最新推荐文章于 2023-06-09 11:35:33 发布

阅读量406

点赞数 1

本文链接：https://blog.csdn.net/htxhe/article/details/45666433

版权

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)

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

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

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

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

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

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

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

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

drawImage(image,x,y)

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

Jesse-He

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记-canvas 标签

HTML5 是 W3C 与 WHATWG 合作的结果，其中，W3C 指 World Wide Web Consortium，万维网联盟；WHATWG 指 Web Hypertext Application Technology Working Group。HTML5 中的一些有趣的新特性：canvas 、video 、audio 、article、footer、he
复制链接

扫一扫