H5的CanvasAPI怎样绘制图形

时间2024-01-23 02:26:08发布访客分类HTML浏览413

导读：收集整理的这篇文章主要介绍了H5的CanvasAPI怎样绘制图形，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5的CanvasAPI怎样绘制图形，怎么用Canvas制作图形？Canvas制作图形的注意事项有哪些，下面就是...

收集整理的这篇文章主要介绍了H5的CanvasAPI怎样绘制图形，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5的CanvasAPI怎样绘制图形，怎么用Canvas制作图形？Canvas制作图形的注意事项有哪些，下面就是实战案例，一起来看一下。

Canvas元素
以下htML代码定义了一个canvas元素。

!DOCTYPE html>
      html>
      head>
          tITle>
    Canvas快速入门/title>
          meta charset="utf-8"/>
      /head>
      body>
      div>
          canvas id="mainCanvas" width="640" height="480">
    /canvas>
      /div>
      /body>
      /html>

通过以下Javascript语句访问canvas元素：

//DOM写法   window.onload = function () {
           VAR canvas = document.getElementById("mainCanvas");
           var context = canvas.getContext("2d");
   }
    ;
   //jquery写法   $(document).ready(function () {
           var canvas = $("#mainCanvas");
           var context = canvas.get(0).getContext("2d");
   }
    );
       //接下来就可以调用context的方法来调用绘图API

2. 基础API
2.1 坐标系统
Canvas 2D渲染上下文采用平面笛卡尔坐标系统，左上角为原点(0,0)，坐标系统的1个单位相当于屏幕的1个像素。

//绘制一个填充矩形   context.fillRect(x, y, width, height)   //绘制一个边框矩形   context.strokeRect(x, y, width, height)   //清除一个矩形区域   context.clearRect(x, y, width, height)

2.2.2 线条
绘制线条与绘制图形有一些区别，线条实际上称为路径。要绘制一条简单的路径，首先必须调用beginPath方法，接着调用MoveTo设置路径的起点坐标，然后调用lineto设置线段终点坐标（可多次设置），再调用closePath完成路径绘制。最后调用stroke绘制轮廓（或调用fill填充路径）。以下为例子：

//示例   context.beginPath();
        //开始路径   context.moveTo(40, 40);
        //移动到点(40,40)   context.lineTo(300, 40);
        //画线到点(300,30)   context.lineTo(40, 300);
        //画线到点(40,300)   context.closePath();
        //结束路径   context.stroke();
        //绘制轮廓   //或者填充用context.fill();

2.2.3 圆形
Canvas实际上并没有专门绘制圆形的方法，可以通过画圆弧来模拟圆形。由于圆弧是一种路径，所以画圆弧的API应该包含在beginPath和closePath之间。
2.3 样式
2.3.1 修改线条颜色

var color;
       //指定RGB值   color = "rgb(255, 0, 0)";
       //指定RGBA值（最后一个参数为alpha值，取值0.0~1.0）   color = "rgba(255, 0, 0, 1)";
       //指定16进制码   color = "#FF0000";
       //用单词指定   color = "red";
       //设置填充颜色   context.fillStyle = color;
       //设置边框颜色   context.strokeStyle = color;

2.3.2 修改线宽

//指定线宽值   var value= 3;
       //设置边框颜色   context.linewidth = value;

2.4 绘制文本

//指定字体样式

context.font = "italic 30px 黑体";

//在点(40,40)处画文字

context.fillText("Hello world!", 40, 40);

相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！