H5的CanvasAPI怎样绘制图形

来源：懂视网责编：小采时间：2020-11-27 15:06:36

H5的CanvasAPI怎样绘制图形

H5的CanvasAPI怎样绘制图形:这次给大家带来H5的CanvasAPI怎样绘制图形，怎么用Canvas制作图形？Canvas制作图形的注意事项有哪些，下面就是实战案例，一起来看一下。Canvas元素以下html代码定义了一个canvas元素。<!DOCTYPE html> <html> <hea

推荐度：

点击下载本文 文档为doc格式

导读H5的CanvasAPI怎样绘制图形:这次给大家带来H5的CanvasAPI怎样绘制图形，怎么用Canvas制作图形？Canvas制作图形的注意事项有哪些，下面就是实战案例，一起来看一下。Canvas元素以下html代码定义了一个canvas元素。<!DOCTYPE html> <html> <hea

这次给大家带来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);

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

H5的CanvasAPI怎样绘制图形

推荐度：

点击下载本文 文档为doc格式

标签：制作如何 API

热门焦点

H5的CanvasAPI怎样绘制图形

H5的CanvasAPI怎样绘制图形

H5的CanvasAPI怎样绘制图形

最新推荐

猜你喜欢

热门推荐