Canvas的使用以及方法整理

最新推荐文章于 2024-09-10 17:45:18 发布

yummyH

最新推荐文章于 2024-09-10 17:45:18 发布

阅读量1.0k

点赞数 1

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

本文链接：https://blog.csdn.net/u014541501/article/details/77771879

版权

HTML5 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

Canvas目前是比较流行用于在网页中通过Javascript脚本语言绘制图形的元素。

在应用方面，包括很多小游戏的制作，动画的实现，基础图形以及文字的绘制等。

下面通过小示例来学习通过canvas进行简单的绘图，

首先我们需要定义一个canvas标签，定义的方法很简单：

<canvas id="canvas" width="1024" height="768"></canvas>

一. canvas的宽高定义

1.这里我建议的写法是这样，或者采用在js中通过 canvas.width = "1024" canvas.height = "768"的形式赋值，需要注意的是 width 和 height 是没有单位的，不需要添加px。

2. 可能有的同学会提出来可不可以通过CSS样式的方式添加 width 和 height 。在这里喔也是不建议的。因为通过Css形式添加 width 和 height 会有可能导致图形拉伸变形。以下通过一个对比图来说明：

通过 canvas的 width , height 属性添加宽高，以（10，10）为原点，绘制300*300正方形图形，效果为正常：

同样的图形，通过CSS样式添加宽高：

为什么会有这样的差异呢？之前看到过一个比喻觉得很恰当，我们可以把 canvas 元素看作一个画板和画布的结合，通过后台浏览器调试模式我们可以知道 canvas 的默认大小是300*150，当我们通过 canvas 的属性 height , width 来设置大小相当于将画板与画布的大小同时固定，而通过 CSS 设置只能改变画板的大小，画布的大小永远是它默认300*150。

二 .canvas的坐标系

canvas的坐标原点永远在图形左上角位置，以水平向右为x轴正方向，以垂直向下为y轴正方向。

如下图：

三 . 绘制简单图形

1.直线形几何图形

代码加备注：

        var canvas = document.getElementById('canvas'); /*获取定义canvas的Dom对象*/
        var context = canvas.getContext("2d"); /*获得canvas2D对象*/
        context.beginPath();   /*定义开始绘图*/
        context.moveTo(10,10);   /*定义起点*/
        context.lineTo(10,200);  /*定义路线*/
        context.lineTo(200,200);
        context.lineTo(200,10);
        context.lineTo(10,10);
        context.lineWidth = 5;  /*定义线条宽度*/
        context.strokeStyle = "#3f51b5"; /*定义线条颜色*/
        context.stroke(); /*绘制线条*/
        context.closePath();

注：lineTo()的参数为坐标点，多个lineTo函数会默认首位连接的次序绘制图形。

2.直线形几何图形的填充

代码加备注：

        var canvas = document.getElementById('canvas'); /*获取定义canvas的Dom对象*/
        var context = canvas.getContext("2d"); /*获得canvas2D对象*/
        context.beginPath();   /*定义开始绘图*/
        context.moveTo(10,10);   /*定义起点*/
        context.lineTo(10,200);  /*定义路线*/
        context.lineTo(200,200);
        context.lineTo(200,10);
        context.lineTo(10,10);
        context.lineWidth = 5;  /*定义线条宽度*/
        context.fillStyle= "rgb(2,100,30)"; /*填充的颜色*/
        context.fill(); /*填充方法*/
        context.closePath();

注：stroke()为连接图形点，形成图形线条，fill()为填充图形。

3.弧形图形

定义弧形图形我们会用到arc()方法

这里我们需要确定arc()方法起始点位置，当我们画一个圆形，他的起始点位置就是3点钟方向。

起点示例图（已经不想再画了，从W3C上拉了一张示意图）：

现在让我们用arc函数画一个圆形：

代码加备注：

        var canvas = document.getElementById('canvas'); /*获取定义canvas的Dom对象*/
        var context = canvas.getContext("2d"); /*获得canvas2D对象*/
        context.beginPath();
        context.strokeStyle = "#3c3c3c";
        context.lineWidth = 5;
        context.arc( 150,120,60,0,2*Math.PI,false);
        context.stroke();
        context.closePath();

注：

<1>.arc()函数中有6个参数，分别是X轴坐标点，Y轴坐标点，半径，开始角度（以弧度计），结束角度（以弧度计），是否为逆时针（False为逆时针，true为顺时针）。

<2>.弧线形图形填充和之前讲的是一样的，通过定义fillStyle，fill()函数实现。

4.文字

代码加备注：

        var fonttest=document.getElementById("canvas");
        var ctx=fonttest.getContext("2d");
        ctx.strokeText("this is a test!",10,50);  /*this is a text定义*/
        ctx.font="20px Georgia";  /*字号字体*/
        var gradient=ctx.createLinearGradient(0,0,fonttest.width,0);  /*创建渐变*/
        ctx.font="30px Verdana";/*字号字体*/
        gradient.addColorStop("0","#6666FF");  /*定义渐变颜色*/
        gradient.addColorStop("0.5","green");  /*定义渐变颜色*/
        gradient.addColorStop("1.0","red");  /*定义渐变颜色*/
        ctx.strokeStyle=gradient;  /*用定义的渐变进行填色*/
        ctx.strokeText("Hellow every body!",10,90);  /*Hellow every body定义显示*/

四. 兼容性

这是caniuse.com上对canvas兼容性的统计：