H5的CanvasAPI怎样绘制图形-H5教程-PHP中文网

H5的CanvasAPI怎样绘制图形

php中世界最好的语言

发布： 2018-01-09 09:51:02

原创

2379 人浏览过

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

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

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

H5的CanvasAPI怎样绘制图形