HTML5画布Canvas

2021-12-29 15:21发布

1、什么是canvas?

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由CSS属性定义该区域的宽高,JavaScript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

Canvas本身没有绘图功能,初始化的Canvas没有任何视觉效果,必须通过 JavaScript 拿到Canvas的 id,然后控制Canvas的绘制功能。所以想要使用Canvas,必须对 JavaScript 有一定的了解。本章将为大家介绍简单的画布创建以及几种简单的基础形状绘制。

2、canvas能做什么?

  1. 游戏:游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧。

  2. 图表制作:图表制作时常被人们忽略,但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图表制作。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。

  3. 字体设计:对于字体的自定义渲染将完全可以基于Web,使用HTML5技术进行实现。

  4. 图形编辑器:图形编辑器能够100%基于Web实现。

  5. 其他可嵌入网站的内容:类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。

3、canvas兼容性

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


元素ChromeIEFirefoxSafariOpera
<canvas>4.09.02.03.19.0



4、canvas基本用法

4.1、创建画布

通过声明一个 Canvas 标签可以创建一个画布元素,Canvas 支持高度、宽度属性。

实例演示:

    <!-- 如果浏览器支持canvas标签,则会显示500*400的黑色边框区域,如果浏览器不支持canvas标签,则会显示标签内部的文字 -->
    <canvas id="cans" width="500" height="400" style="border:1px solid #000">
       您的浏览器不支持canvas标签
    </canvas>

代码说明:如果浏览器支持Canvas标签,则会显示500*400的黑色边框区域,如果浏览器不支持Canvas标签,则会显示标签内部的文字

画布坐标系:

画布左上角(0,0)默认原点,x 坐标向右方增长,y 坐标则向下方延伸

但是,Canvas 的坐标系并不是一成不变的,原点是可改变的,可以对 Canvas 坐标系统进行移动 translate、旋转 rotate 和缩放等变形操作。坐标变换之后绘制的图形 x,y 偏移量都以新原点为准,旋转角度,缩放比,以新坐标系角度为准。

获取画布对象:

声明完画布之后,要操控画布必须获取到它提供的绘图 SDK 对象

var context = a.getContext(contextID)

通过 getContext 函数可以获取画布的 SDK 对象,在 HTML 中它被称为 CanvasRenderingContext2D 对象。CanvasRenderingContext2D 提供了一系列用于绘图的函数,其中包含颜色、样式、阴影线条样式、矩形路径、转换文本、图像绘制函数等。接下来我们就几个常见绘图函数进行说明。

4.2、创建一个矩形

通过 fillRectangle函数可以创建一个矩形,使用 fillStyle 属性为矩形填充颜色。

实例演示:

<canvas id="cans" width="500" height="400" style="border:1px solid #000">您的浏览器不支持canvas</canvas>
    <script>
        var a = document.getElementById("cans");
        var ctx = a.getContext("2d");
        ctx.fillStyle = "#f00"; 
        // fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
        ctx.fillRect(0, 0, 250, 175); 
    </script>

代码解释:

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

  • ctx就是画布对象

  • 通过fillStyle属性填充矩形区域颜色为#f00

  • Canvas 是一个二维网格。Canvas 的左上角坐标为 (0,0),fillRect 方法拥有参数 (0,0,250,175),意思是:在画布上,从左上角(0,0)开始绘制 250*175 的矩形。

4.3、绘制线条

使用 moveTo 函数定义线的开始坐标,lineTo 函数定义线的结束坐标,stroke 函数进行最终的绘制操作。

实例演示:

  <canvas id="cans" width="500" height="400" style="border:1px solid #000">您的浏览器不支持canvas</canvas>
    <script>
        var a = document.getElementById("cans");
        var ctx = a.getContext("2d");
        //开始坐标在 (10,20)
        ctx.moveTo(20, 20); 
         //线条移动到 (20,100)
        ctx.lineTo(20, 100);
        //线条移动到 (70,100)
        ctx.lineTo(70, 100); 
        //线条颜色设置为绿色
        ctx.strokeStyle = "green"; 
        //描边绘制
        ctx.stroke(); 
    </script>

代码解释:

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

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

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

  • stroke() 绘制线条

4.4、绘制圆形

使用arc函数可以画出一个圆形。

实例演示:

   <canvas id="cans" width="500" height="400" style="border:1px solid #000">您的浏览器不支持canvas</canvas>
    <script>
        var a = document.getElementById("cans");
        var ctx = a.getContext("2d");
        //arc(x,y,r,start,stop) 
        ctx.arc(100, 100, 80, 0, 2 * Math.PI); //圆心坐标是(100,100) 半径是80 起始弧度0 结束弧度2PI
        ctx.stroke();
    </script>

代码解释:

我们采用arc(x,y,r,start,stop,counterclockwise)方法创建弧/曲线(用于创建圆或部分圆)。

参数描述
x圆的中心的 x 坐标。
y圆的中心的 y 坐标。
r圆的半径。
start起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)
stop结束角,以弧度计。
counterclockwise可选。规定应该逆时针还是顺时针绘图。false = 顺时针,true = 逆时针。


如需通过 arc() 来创建圆,把起始角设置为 0,结束角设置为 2*Math.PI。使用 stroke()或fill() 方法在画布上绘制实际的弧。

4.5、绘制文字

使用 strokeText 绘制文字。

实例演示:

<canvas id="cans" width="500" height="400" style="border:1px solid #000">您的浏览器不支持canvas</canvas>
    <script>
        var canvas = document.getElementById('cans'),
            context = canvas.getContext('2d');
        context.font = '40px Arial';
        context.fillStyle = 'red';
        context.strokeStyle = 'yellow';
        context.fillText('ujiuye', canvas.width / 2 - 150, canvas.height / 2 + 15);
        context.strokeText('ujiuye', canvas.width / 2 - 150, canvas.height / 2 + 15);
    </script>


代码解释:

  • font 属性设置或返回画布上文本内容的当前字体属性,font 属性使用的语法与CSS里font属性相同。

    默认值:10px sans-serif
    JavaScript 语法:context.font="italic small-caps bold 12px arial";
  • fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色

JavaScript 语法:

context.fillText(text,x,y,maxWidth);
参数描述
text规定在画布上输出的文本。
x开始绘制文本的 x 坐标位置(相对于画布)。
y开始绘制文本的 y 坐标位置(相对于画布)。
maxWidth可选。允许的最大文本宽度,以像素计。