H5的CanvasAPI怎样绘制图形-Tutorial H5-php.cn

H5的CanvasAPI怎样绘制图形

php中世界最好的语言

Lepaskan： 2018-01-09 09:51:02

asal

2377 orang telah melayarinya

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

Salin selepas log masuk

通过以下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

Salin selepas log masuk

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)

Salin selepas log masuk

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();

Salin selepas log masuk

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;

Salin selepas log masuk

2.3.2 修改线宽

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

Salin selepas log masuk

2.4 绘制文本

//指定字体样式

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

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

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

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

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

H5的CanvasAPI怎样绘制图形