H5基础（5）-HTML5绘图canvas

最新推荐文章于 2024-09-05 23:06:55 发布

zrr_rory

最新推荐文章于 2024-09-05 23:06:55 发布

阅读量663

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/zrr_rory/article/details/77843317

HTML5 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍Canvas的基本使用方法，包括如何创建画布、获取上下文、绘制图形（如矩形、线条、文本、圆形等）、填充样式及绘制图片等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas绘图API

1.1 Canvas的Context对象

要使用Canvas来绘制图形必须在页面中添加Canvas的标签

<canvas id="demoCanvas" width="500" height="500">
<p>
  请使用支持HTML5的浏览器查看本实例
</p>
</canvas>

只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属性也是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文（Context）了，Canvas绘制图形都是靠着Canvas对象的上下文对象

<script type="text/javascript">
//第一步：获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：获取上下文
var context = canvasDom.getContext('2d');
</script>

Context上下文默认两种绘制方式：

第一种：绘制线（stroke）

第二种：填充（fill）

1.2 Canvas绘制立体透明矩形

1.2.1 Canvas绘制步骤：

创建HTML页面，设置画布标签
编写js，获取画布dom对象
通过canvas标签的Dom对象获取上下文
设置绘制样式、颜色
绘制矩形，或者填充矩形
代码如下：

<body>
    <canvas id="demoCanvas" width="500" height="500">
        <p>请使用支持HTML5的浏览器查看本实例</p>
    </canvas>
    <!---下面将演示一种绘制矩形的demo--->
    <script type="text/javascript">
        //第一步：获取canvas元素
        var canvasDom = document.getElementById("demoCanvas");
        //第二步：获取上下文
        var context = canvasDom.getContext('2d');
        //第三步：指定绘制线样式、颜色
        context.strokeStyle = "red";
        //第四步：绘制矩形，只有线。内容是空的
        context.strokeRect(10, 10, 190, 100);
        //以下演示填充矩形。
        context.fillStyle = "blue";
        context.fillRect(110,110,100,100);
    </script>
</body>

1.3 Canvas绘制线条

Context对象的beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法。

代码如下：

<body>
    <canvas id="demoCanvas" width="500" height="600">
    </canvas>
    <script type="text/javascript">
        //通过id获得当前的Canvas对象
        var canvasDom = document.getElementById("demoCanvas");
        //通过Canvas Dom对象获取Context的对象
        var context = canvasDom.getContext("2d");
        context.beginPath(); // 开始路径绘制
        context.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
        context.lineTo(200, 200); // 绘制一条到(200,20)的直线
        context.lineTo(400, 20);
        context.closePath();
        context.lineWidth = 2.0; // 设置线宽
        context.strokeStyle = "#CC0000"; // 设置线的颜色
        context.stroke(); // 进行线的着色，这时整条线才变得可见
    </script>
</body>

1.4 Canvas绘制文本

Context上下文对象的fillText(string, x, y)方法是用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。另外注意一点：fillText方法不支持文本断行，即所有文本出现在一行内。所以，如果要生成多行文本，只有调用多次fillText方法。

代码如下：

<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
    //通过id获得当前的Canvas对象
    var canvasDom = document.getElementById("demoCanvas");
    //通过Canvas Dom对象获取Context的对象
    var context = canvasDom.getContext("2d");
    context.moveTo(200,200);
    // 设置字体
    context.font = "Bold 50px Arial";
    // 设置对齐方式
    context.textAlign = "left";
    // 设置填充颜色
    context.fillStyle = "#005600";
    // 设置字体内容，以及在画布上的位置
    context.fillText("老马!", 10, 50);
    // 绘制空心字
    context.strokeText("blog.itjeek.com!", 10, 100);
</script>

1.5 Canvas绘制圆形和椭圆

Context上下文的arc方法就是绘制圆形或者椭圆，arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。

代码如下：

<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
    //通过id获得当前的Canvas对象
    var canvasDom = document.getElementById("demoCanvas");
    //通过Canvas Dom对象获取Context的对象
    var context = canvasDom.getContext("2d");
    context.beginPath();//开始绘制路径
    //绘制以 （60,60）为圆心，50为半径长度，从0度到360度（PI是180度），最后一个参数代表顺时针旋转。
    context.arc(60, 60, 50, 0, Math.PI * 2, true);
    context.lineWidth = 2.0;//线的宽度
    context.strokeStyle = "#000";//线的样式
    context.stroke();//绘制空心的，当然如果使用fill那就是填充了。
</script>

1.6 Canvas绘制图片

Canvas绘制图片应该是他的一大特点或者是亮点吧。当然配合File的API，让JS变得无可匹敌。那接下里给大家演示一下怎样绘制图片，并且做出一个立体效果出来。

代码如下：

<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
    //通过id获得当前的Canvas对象
    var canvasDom = document.getElementById("demoCanvas");
    //通过Canvas Dom对象获取Context的对象
    var context = canvasDom.getContext("2d");
    var image = new Image();//创建一张图片
    image.src = "Images/a.png";//设置图片的路径
    image.onload = function() {//当图片加载完成后
     for (var i = 0; i < 10; i++) {//输出10张照片
            //参数：（1）绘制的图片  （2）坐标x，（3）坐标y
            context.drawImage(image, 100 + i * 80, 100 + i * 80);
        }
    };
</script>