HTML5 canvas元素初识

最新推荐文章于 2024-03-02 13:59:14 发布

Wendy-lxq

最新推荐文章于 2024-03-02 13:59:14 发布

阅读量983

点赞数 1

分类专栏： HTML & HTML5 文章标签： canvas html5

本文链接：https://blog.csdn.net/u010297791/article/details/54948483

版权

HTML & HTML5 专栏收录该内容

14 篇文章 6 订阅

订阅专栏

HTML5 canvas元素随其而来的编程接口Canvas API应用前景极为广阔。简单地说，canvas元素能够在网页中创建一块矩形区域，这块矩形区域可以称为画布，这其中可以绘制各种图形。 <canvas></canvas>是HTML5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图。

1、在页面中添加canvas元素

如果要向页面中添加canvas元素，可以使用下面的代码。默认情况下，Canvas所创建的矩形区域大小为宽300px,高150px，也可以使用width和height属性来自定义其宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>
</html>

以上代码只是简单地创建了一个Canvas对象，在浏览器中打开的页面上什么都不会显示。可以通过使用border属性来给canvas设置边框样式。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 2px solid blue"></canvas>
</body>
</html>

效果如下：

2、Canvas如何绘制图形

在了解Canvas如何绘制图形前，我们先初步了解几个名次概念。

1）context：context是一个封装了很多绘图功能的对象，获取这个对象的方法是

var context =canvas.getContext("2d");//2d表示的是html5目前只能支持2d，而不能提供3d显示

2）canvas元素绘制图像的时候有两种方法，分别是

context.fill()//填充

context.stroke()//绘制边框

3）style:在进行图形绘制前，要设置好绘图的样式

context.fillStyle//填充的样式

context.strokeStyle//边框样式

4）颜色的表示方式:

直接用颜色名称:"red" "green" "blue"

十六进制颜色值: "#EEEEFF"

rgb(1-255,1-255,1-255)

rgba(1-255,1-255,1-255,透明度)

canvas本身并不能实现图形绘制功能，绘制图形的工作需要有JavaScript完成。使用JavaScript可以在canvas元素内部添加线条、图片和文字，也可以在其中绘画，还可以加入高级动画。接下来说一下具体的绘制图形步骤：

第一步：在HTML5页面中添加canvas元素，必须定义canvas元素的id属性值以便接下来调用。

<canvas id="myCanvas" width="200" height="200" style="border: 2px solid blue"></canvas>

第二步：使用id寻找canvas元素。在JavaScript中可以通过document.getElementById()方法找到canvas元素。

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

第三步：通过canvas元素的getContext()方法来获取上下文（Context），即创建Context对象以获取允许进行绘制的2D环境。

var cxt=canvas.getContext("2d");

第四步：使用JavaScript绘制图形。例如，使用一下代码可以绘制一个位于画布中央的矩形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border: 2px solid #34b1ff"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var cxt=canvas.getContext("2d");
    cxt.fillStyle="#34b1ff";
    cxt.fillRect(50,25,100,50);
</script>
</body>
</html>

效果：

3、检测浏览器是否支持

根据W3c上的定义，可以知道目前canvas的浏览器支持情况如下：

那么我们在不知道浏览器版本的情况下，要如何显示呢？除了可以通过在不支持canvas的浏览器中显示替代文本之外，我们还可以使用JavaScript脚本来检测浏览器是否支持canvas，方法是判断getContext函数是否存在。JavaScript代码如下：

    var canvas = document.getElementById("myCanvas");
    if(canvas.getContext){
        alert("您的浏览器支持Canvas.")
    }else{
        alert("您的浏览器不支持Canvas.")
    }

4、绘制简单图形

我们可以看到很多canvas实现的特效，效果非常好。不过，正所谓“万丈高楼平地起”，所有的事物都要从最简单最基础的部分开始筑建，我们先从最简单的直线、矩形和圆形开始绘制。

1）绘制直线

绘制直线时需要调用3个方法：moveTo()、lineTo()、stroke().

moveTo()方法用于建立新的子路径，并规定其起始点为（x,y）。
lineTo()方法用于从moveTo（）方法规定的起始点开始绘制一条道规定坐标的直线，如果前面没有用moveTo（）方法规定子路径的起始点，则lineTo（）方法等同于moveTo（）方法。
stroke()方法用于沿该路径绘制一条直线。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border: 2px solid #ff54c5">
    您的浏览器不支持.
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var cxt=canvas.getContext("2d");
    cxt.strokeStyle="#ff54c5";
    cxt.moveTo(0,0);
    cxt.lineTo(200,100);
    cxt.stroke();
</script>
</body>
</html>

效果：

2）绘制矩形

绘制矩形有两种方法，一种是用颜色填充矩形区域，一种是用线条绘制矩形轮廓。其中用到的方法分别是fillRect()和strokeRect()，而且为图形指定颜色提供了两个属性，即fillStyle和strokeStyle，前者用于要填充的颜色，后者是线条颜色。

示例1代码如下（填充）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border: 2px solid #34b1ff"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var cxt=canvas.getContext("2d");
    cxt.fillStyle="#34b1ff";
    cxt.fillRect(0,0,100,50);
</script>
</body>
</html>

效果：

示例2代码如下（线条）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border: 2px solid #66d3ff"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var cxt=canvas.getContext("2d");
        cxt.strokeStyle="#66d3ff";
        cxt.strokeRect(0,0,100,50);
</script>
</body>
</html>

效果：

3）绘制圆形

圆形的绘制仍然是采用绘制路径并填充颜色的方法。在绘制圆形的过程中，用到了4个比较关键的方法，beginPath()、arc()、closePath()和fill()。

beginPath()方法用于开始绘制路径，closePath()方法用于结束绘制路径。调用beginPath()方法后，在Canvas中进行一系列圆形的绘制，绘制完成后，应该调用closePath()方法将图形闭合起来。
arc()方法本意为绘制弧线，当采用适当的参数后，即可绘制圆形。在这个方法中，具体的方法为：arc(x,y,radius,startAngle,engAngle,anticlockwise)，一共有6个参数，参数中的x,y为起点坐标，radius为圆形的半径，startAngle为开始的角度，endAngle为结束的角度，anticlockwise为是否按照顺时针方向进行绘制。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var cxt=canvas.getContext("2d");
        cxt.fillStyle="#66d3ff";
        cxt.beginPath();
        cxt.arc(100,100,75,0,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
</script>
</body>
</html>

效果：

当然，也可以像画矩形一样，采用线条轮廓的方式，采用stroke()方法，颜色相对应地采用strokeStyle()方法。

Wendy-lxq

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 canvas元素初识

HTML5 canvas元素随其而来的编程接口Canvas API应用前景极为广阔。简单地说，canvas元素能够在网页中创建一块矩形区域，这块矩形区域可以称为画布，这其中可以绘制各种图形。是HTML5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图。1、在页面中添加canvas元素如果要向页面中添加ca
复制链接

扫一扫

专栏目录