H5的CanvasAPI如何绘制图形-

这次给大家带来H5的CanvasAPI如何绘制图形，如何用Canvas制作图形？Canvas制作图形的注意事项是什么，下面就是实战案例，一起来看一下。 这次给大家带来H5的CanvasAPI如何绘制图形，如何用Canvas制作图形？Canvas制作图形的注意事项是什么，下面就是实战案例，一起来看一下。

Canvas元素
下列html代码定义了一个canvas元素。

通过下列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);

信赖看了这些案例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！

相干浏览：

bootstrap里怎样统计table sum的数目

如何用JS做出切换隐蔽与显示同时切换图标

如何用JS做出按钮禁用和启用

以上就是H5的CanvasAPI如何绘制图形的细致内容，更多请关注 百分百源码网 其它相干文章！