学习使用H5的Canvas

最新推荐文章于 2025-04-23 22:40:30 发布

红盖哇哈哈

最新推荐文章于 2025-04-23 22:40:30 发布

阅读量640

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_45731450/article/details/111398367

版权

canvas简介

<canvas> 是HTML5新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。

<canvas>是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。

以上的这些都是在官方找到的解释，仔细看看还是感觉挺深奥的，之所以要写这篇文章是因为这段时间在项目中用到了canvas这个技术，当时学的时候没有上心，导致现在在项目中用起来感觉十分费力，所以打算复习复习这方面的知识！

Canvas基本使用

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

<canvas>看起来和<img>标签一样，只是 <canvas>只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。
如果不给<canvas>设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置<canvas>的宽高。
由于canvas会有浏览器的兼容性，在一些浏览器中并不能显示，所以需要写一些替换的文字：

<canvas>
    你的浏览器不支持canvas,请升级你的浏览器
</canvas>

结束标签</canvas>不可省
与 <img>元素不同，<canvas>元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

渲染上下文(Thre Rending Context)

<canvas>会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。我们重点研究 2D渲染上下文。

var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

检测支持性

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

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

一个简单的例子

<html>
<head>
    <title>Canvas tutorial</title>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
    function draw(){
        var canvas = document.getElementById('tutorial');
        if(!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(200,0,0)";
      	//绘制矩形
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
    }
    draw();
</script>
</html>

绘制矩形

<canvas> 只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径(path)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。
canvas 提供了三种方法绘制矩形：

fillRect(x, y, width, height) —— 绘制一个填充的矩形
strokeRect(x, y, width,height) —— 绘制一个矩形的边框
clearRect(x, y, widh, height) —— 清除指定的矩形区域，然后这块区域会变的完全透明。

这3个方法具有相同的参数。
x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
width, height：指的是绘制的矩形的宽和高。

function draw(){
    var canvas = document.getElementById('tutorial');
    if(!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.fillRect(10, 10, 100, 50);  //绘制矩形,填充的默认颜色为黑色
    ctx.strokeRect(10, 70, 100, 50);  //绘制矩形边框
    
}
draw();

绘制路径(path)

图形的基本元素是路径。
路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

使用路径绘制图形需要一些额外的步骤：

创建路径起始点
调用绘制方法去绘制出路径
把路径封闭一旦路径生成，
通过描边或填充路径区域来渲染图形。

下面是需要用到的方法：

beginPath() —— 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
moveTo(x, y) —— 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
closePath() —— 闭合路径之后，图形绘制命令又重新指向到上下文中
stroke() —— 通过线条来绘制图形轮廓
fill() —— 通过填充路径的内容区域生成实心的图形

绘制圆弧

arc(x, y, r, startAngle, endAngle, anticlockwise):
以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)

注意：

这里的度数都是弧度。
0弧度是指的x轴正方形

function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
    ctx.stroke();
}
draw();

以上是我能想到的canvas用到的地方；
然而 canvas 却存在一个缺陷：由于 canvas 是作为一个整体画布存在，所有的内容只不过是其内部渲染的结果，我们不能像在 dom 元素上监听事件一样，在 canvas 所渲染的图形内绑定各种事件，因此基于 canvas 画布开发出一套交互式应用是件复杂的事情。

好了，今天就先记录到这里，等后续会陆续补上更深层次的东西！