首页 > 后端开发 > 正文

如何用Canvas绘制多种图形

2024-09-27 10:35:21 | 我爱编程网

今天我爱编程网小编整理了如何用Canvas绘制多种图形相关内容,希望能帮助到大家,一起来看下吧。

本文目录一览:

如何用Canvas绘制多种图形

如何用Canvas绘制多种图形

HTML5 的标准已经出来好久了,但是似乎其中的 Canvas 现在并没有在太多的地方用到。一个很重要的原因是,Canvas 的标准还没有完全确定,不适合大规模用在生产环境。但是,Canvas 的优点也是很明显的,例如在绘制含有大量元素的图表的时候,SVG 往往因为性能问题而无法胜任,例如我见过的一次技术分享会的抽奖环节,虽然效果比较炫,但因为每个头像都是 DOM,利用 CSS3 控制的动画,导致了性能非常低下。此外,随着硬件性能的提高,视频截图、图像处理等功能也逐渐可以在网页上实现了,大多数网站用的是 Flash,但是 Flash 在 Mac 电脑上性能不高,还需要学一些额外的知识。Canvas 则是直接使用 JavaScript 来进行绘图,对 Mac 友好,所以不失为 Flash 的一个继承者。

使用 Canvas
说了这么多,Canvas 究竟是个啥?
英文中 Canvas 的意思是“画布”,不过这里说的 Canvas 是 HTML5 中新出的一个元素,开发者可以在上面绘制一系列图形。Canvas 在 HTML 文件中的写法很简单:
<canvas id="canvas" width="宽度" height="高度"></canvas>

其中 id 属性是所有 HTML 元素都可以用的,Canvas 自带的属性只有后面两个(分别控制宽度、高度),没有其它的了。至于兼容性,CanIUse 上面写了,基础的功能目前用户使用的 90% 的浏览器都支持,所以大部分情况下还是可以放心使用的。

注意,一定要使用 Canvas 自带的 width 和 height 属性,不要使用 CSS 来控制,因为 CSS 控制会导致 Canvas 变形。可以试着与 PhptpShop 对比一下,后者是改变“图像大小”,前者才是正确的改变“画布大小”。例如下图是三张图片的横向拼接:最左边的黑框中是大小为 50px * 50px 的原图;中间是改变了图像大小为 100px * 100px 的效果,图像变得模糊,但是对于图像本身来说坐标范围并没有变大;最右边才是正确的 100px * 100px 的 Canvas。

Canvas 绝大部分的绘图方法都与 <canvas> 标签无关,需要使用 JavaScript 对其进行操作,这就是所谓的 Canvas API。
我们首先获取到这个元素:
var canvas = document.getElementById('canvas');

然后通过一个方法来获取可以调用一切 Canvas API 的入口:
var ctx = canvas.getContext('2d');

看到 2d 是不是很激动地联想到有没有 3d 呢?没有 3d 的写法,不过如果想要开启 3D 世界的大门,则可以写 canvas.getContext('webgl')。然而 WebGL 是基于 OpenGL ES 2.0 的一套标准,与本文是彻彻底底的两条路,因此这里就不讨论了。
Canvas 中的基本概念
坐标
与数学上常见的笛卡尔坐标系不太相同,Canvas 的坐标系是计算机中常见的坐标系,它长这样:

画布的最左上角是 (0,0),往右 x 增大,往下 y 增大,而且 x 和 y 都是整数(就算在计算过程中不是整数,在绘制的时候也会当作整数处理),单位是像素。
绘图
带大家怀旧一下。不知道有多少同学小时候玩过 logo 语言,在里面你可以控制一只小海龟在一块板子上行走、画画、提笔、落笔。Canvas 中也一样,你需要控制一只画笔的移动和绘制。然而 Canvas 更高级一些,你可以直接利用一些函数来画图,不用去控制那只画笔的位置。
Canvas 中的基本图形
通过上文定义的 ctx 变量可以干许多有意思的事情,我们先看看如何绘制一些基本图形。
线条
我们指定画笔移动到某一点,然后告诉画笔需要从当前这一点画到另一点。我们可以让画笔多次移动、绘制,最后统一输出到屏幕上。例子如下:
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.moveTo(10, 20);
ctx.lineTo(40, 70);
ctx.stroke();

上面的代码中,lineTo 是产生线条用的函数,执行完之后画笔就移到了线条的终点。需要注意的是,线条此时并没有显示在屏幕上,必须调用 stroke 才会显示。这样设计是有道理的,因为向屏幕上输出内容需要耗费大量的资源,我们完全可以先攒够一波 lineTo,最后用 stroke 放一个大的。
路径
绘制路径非常简单,只需要先告诉 ctx 一声“我要开始画路径了”,然后通过各种方法(例如 lineTo)绘制路径。如果需要画一个封闭路径,那就最后告诉 ctx一声:“我画完了,你把它封闭起来吧。”当然,不要忘记利用 stroke 输出到屏幕上。
一个简单的例子:
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.closePath();
ctx.stroke();

如果我不想只描绘路径线条,而是想填充整个路径呢?可以将最后一行的 stroke 改成 fill,这样就跟使用了画图中的油漆桶一样,封闭路径里面的内容就都被填充上颜色了:
ctx.fill();

弧 / 圆形
绘制弧的函数参数比较多:
ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 起始角度, 终止角度, 是否为逆时针);

注意,在 Canvas 的坐标系中,角的一边是以圆心为中心的水平向右的直线。角度单位均为弧度。例如下图,确定了圆心、起始角度(图中标明的锐角)和终止角度(图中标明的钝角),方向为逆时针,于是就有了这么一个弧。如果方向为顺时针,那么就会是一个跟它互补的、非常非常大的弧……

所以如果转了 2π 圈之后,弧就成了圆形,因此也可以使用绘制弧的方式来绘制圆形:
ctx.beginPath();
ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 0, Math.PI * 2, true);
ctx.closePath();

最后一个参数随便填(当然也可以不填),因为不管是顺时针还是逆时针,转了 2π 圈之后都是一个圆。
矩形
如果只是想绘制一个横平竖直的矩形,可以使用下面的两个方法:
// 只描边
ctx.strokeRect(左上角 x 坐标, 左上角 y 坐标, 宽度, 高度);
// 只填充
ctx.fillRect(左上角 x 坐标, 左上角 y 坐标, 宽度, 高度);

线条样式 / 填充样式
之前绘制的所有图形都是黑色的,但是 Canvas 肯定不止这么一种颜色(不然标准的制定者会被喷的很惨)。事实上,Canvas 可以单独设置线条样式和填充样式,分别使用的是 strokeStyle 和 fillStyle。可能的值有三种:纯色、渐变、图像。既然线条样式与填充样式的使用方法相同,那么下面统一以填充样式为例。如果想设置线条样式,直接将所有的 fillStyle改成 strokeStyle 即可,里面的参数都不变。
/* 纯色填充 */
// 普通的颜色
ctx.fillStyle = '#0000ff';
// 带有透明度的颜色
ctx.fillStyle = 'rgba(64, 0, 127, 0.5)';

/* 渐变填充 */
// 设置渐变的尺寸(参数分别为起始点的 x 和 y、终止点的 x 和 y)
var gradient = ctx.createLinearGradient(0, 0, 170, 0);
// 设置过渡色,第一个参数是渐变的位置,第二个参数是颜色
gradient.addColorStop(0, 'magenta');
gradient.addColorStop(0.5, 'blue');
gradient.addColorStop(1.0, 'red');
// 设置填充样式
ctx.fillStyle = gradient;

/* 图片填充 */
// 创建图片
var image = new Image;
image.src = '/path/to/image.png';
// 创建图片笔触,可以指定图片的平铺方式,这里是横向平铺
var pattern = ctx.createPattern(image, 'repeat-x');
// 设置笔触填充
ctx.fillStyle = pattern;

关于渐变,除了代码中提到的线性渐变以外,还有 createRadialGradient,也就是径向渐变。
设置完填充样式之后,就可以使用 fill 来填充啦!如果设置的是线条样式,那么就可以使用 stroke 来描边。
当然,对于线条样式,还有个额外的方法叫 lineWidth 可以用来控制线条的宽度。
文字
要想在画布上画文字,首先需要知道所使用的字体和字号:
ctx.font = '30px Verdana';

然后就可以通过 strokeText 或者 fillText 来对字体描边或者填充字体。
ctx.strokeText("Hello Coding!", 23, 33);
ctx.fillText("Hello Coding!", 23, 66);

图片
在 Canvas 中绘制图片有三种方法:
// 指定绘制位置
ctx.drawImage(image, x, y);
// 指定绘制位置和图像宽高
ctx.drawImage(image, x, y, width, height);
// 指定剪裁区域、绘制位置和图像宽高
ctx.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);

参数的含义依次如下:
image: 要使用的 Image、Canvas 或 Video
sx: 可选,开始剪切的 x 坐标
sy: 可选,开始剪切的 y 坐标
swidth: 可选,被剪切图像的宽度
sheight: 可选,被剪切图像的高度
x: 在画布上放置图像的 x 坐标
y: 在画布上放置图像的 y 坐标
width: 可选,要使用的图像的宽度
height: 可选,要使用的图像的高度

画布设置
细心的同学可能会发现,刚才有些属性是直接对 ctx 变量做设置,例如 ctx.lineWidth,只要设置了它,那么后续画出来的线条全都是这么个宽度。
其实,Canvas 的设置项还有许多,例如我们可以直接移动画布、旋转画布、设置全局的绘制透明度等等。这些设置还可以随时保存和恢复。
要注意的一点是,所有已经画在画布上的东西,是已经定死了的,不管之后再次进行任何设置都不会再改变。这个很像 Windows 下的画图程序。
废话不多说,直接上代码:
// 移动画布,其实就是移动坐标系
ctx.translate(往右移动的量, 往下移动的量);
// 旋转画布,旋转中心为坐标系原点
ctx.rotate(顺时针旋转的角度);
// 以坐标系原点为中心缩放画布
ctx.scale(横向放大倍数, 纵向放大倍数);
// 设置绘制透明度,如果 fillStyle 等属性设置了透明度则会叠加
ctx.globalAlpha(零到一的小数);
// 设置全局组合操作
ctx.globalCompositeOperation = 'lighter';
// 保存当前设置
ctx.save();
// 恢复上次保存的设置
ctx.restore();

移动、旋转、缩放其实就是在控制绘图的坐标系,如果你在调用这三个方法的时候,脑子里时刻有一个带刻度的坐标系,效果会非常好。
事实上,Canvas 的坐标变换遵循计算机图形学的知识:变换矩阵。简单来说,一个坐标可以看成是一个矩阵,坐标所对应的矩阵乘上变换矩阵就可以实现对坐标的变换。为了提升计算的效率,可以先计算出几种变换复合之后的变换矩阵,然后直接通过 transform 函数对当前坐标系进行变换,或者通过 setTransform 函数将坐标系重置为初始状态后再进行变换。至于变换矩阵的内容,对于本文来说就有些超纲了。
全局组合操作有点像 PhotoShop 里面的“混合选项”,具体的实现方式还没有完全确定,目前常见浏览器都统一了的实现方式有:source-over、source-atop、destination-over、destination-out、lighter、xor。具体的行为可以看 Mozilla 官方文档,但是由于标准还未完全确定,因此其它浏览器不保证所有的行为都跟 Mozilla 的标准一致。一般来说,比较常见的是 source-over 和 lighter 两种,这两种的标准在浏览器界也算是无可争议的。
至于保存和恢复设置就有点好玩了,首先需要了解一个叫“栈”的东西。
栈是一个一维数组,规定只能从一个方向操作。栈一开始是空的,我们可以从这个方向往数组 push 元素,也只能从这个方向把最后一个元素(栈顶元素)pop 出来,除此以外没有任何多余的操作。当然,pop 的次数不能多于 push 的次数,因为 pop 到栈底的时候栈里就已经没有元素了,此时再 pop 是没有意义的。栈的用处有很多,例如括号匹配、表达式求值、深度优先搜索,甚至绝大部分语言的函数调用都要用到栈。
每次我们调用 save 函数,实际上是将当前的全局设置 push 到了一个专门栈上,每次调用 restore 函数的时候将最后一次保存的内容 pop 出来并用它覆盖当前的全局设置,这样栈顶就是最近一次保存的内容了。保存和恢复在某些情况下很好用,例如我需要画一个歪着的图形,然后继续画正着的图形,这样就可以先调用 save,然后调用 rotate,画完图形之后再 restore 回来,继续画其它的图形。
其实 Canvas 还有许多方法,例如 toDataURL 直接将当前画布上的内容转换为十六进制的 data-url,getImageData直接将图像转换为 RGBA 数组以供图像处理算法使用,putImageData 将 RGBA 数组转换为图片显示在画布上等等。如果配上 JavaScript 的定时更新(最好用 requestAnimationFrame 而不是 setInterval),则可以产生动画效果。网上还有许多 Canvas 的库,可以让程序员更简便地基于 Canvas 编写属于自己的特效或功能。在这儿我想说一句话:大家的脑洞有多大,Canvas 的能力就有多强~

如何用Canvas绘制多种图形我爱编程网

PHP的其他方面

PHP 在数据库方面的丰富支持,也是它迅速走红的原因之一,它支持下列的数据库或是数据文件:
Adabas 、D、 DBA、dBase 、dbm 、filePro 、Informix 、InterBase、mSQL 、Microsoft SQL Server、·MySQL、Solid、Sybase、 Oracle 、PostgreSQL
而在 Internet 上它也支持了相当多的通讯协议 (protocol),包括了与电子邮件相关的 IMAP,POP3;网管系统 SNMP;网络新闻NNTP;帐号共用 NIS;全球信息网 HTTP 及 Apache 服务器;目录协议 LDAP 以及其它网络的相关函数。
除此之外,用 PHP 写出来的 Web 后端 CGI 程序,可以很轻易的移植到不同的操作系统上。例如,先以 Linux 架的网站,在系统负荷过高时,可以快速地将整个系统移到 SUN 工作站上,不用重新编译 CGI 程序。面对快速发展的 Internet,这是长期规划的最好选择。
相关语法及概念
php 支持八种原始类型。
四种标量类型:boolean(布尔型) integer(整型) float(浮点型,也作“double”) string(字符串)
两种复合类型:array(数组)object(对象)
最后是两种特殊类型:resource(资源)NULL
为了确保代码的易读性,本手册还介绍了一些伪类型:mixed、number、callback
语法(例子中均忽略了PHP代码边界符 <?php ?>):
注释的语法有三种: //comment这个是单行注释/*comment*/这个是多行注释#comment这个是脚本类型注释,很少用基本的结构控制语句: //分支结构(选择结构)if(condition){//Statement}if(condition){//Statement}else{//Statement}if(condition){//Statement}elseif(condition){//Statement}//多分支结构switch($变量){case'值'://Statementbreak;case'值2'://Statementbreak;default://Statement}//循环结构while(condition){//Statement}do{//Statement}while(condition);for(初始化;判断;变化){//Statement}//数组遍历专用循环语句foreach($Arrayas$value){echo$value;}foreach($Arrayas$key=>$value){echo$key;echo$value;}一个PHP实例: <html><head><title>Firstprogram</title></head><body>//php中string类型的拼接符和其它大多数采用+号运算符不一样,而是采用.号运算//在一般语言中用于对象属性和方法调用的.运算符,则和C语言的结构体一样用=><?phpechohelloworld.!;?></body></html>php对面向对象的支持
面向对象编程的概念:
不同的作者之间说法可能不一样,但是一个OOP语言必须有以下几方面:
1.抽象数据类型和信息封装
2.继承
3.多态
在PHP中是通过类来完成封装的: //在OOP类中,通常采用大双驼峰命名法,每个单词的首字母都大写classSomething{//作用域修饰符:public公共的;private私有的;protected受保护的;//属性的名称一般用全小写private$x=null;//在编程建议中,内部使用的属性应该给私有修饰符,然后通过方法取值赋值//方法的名称一般用小驼峰命名法,第一个单词全小写,剩下的单词首字母大写//因为PHP不会自动为变量使用$this所以必须主动加上$this伪变量来指向操作的对象publicfunctionsetX($v){$this->x=$v;}publicfunctiongetX(){return$this->x;}}当然你可以按自己的喜好进行定义,但最好保持一种标准,这样会更有效。数据成员在类中使用var声明来定义,在给数据成员赋值之前,它们是没有类型的。一个数据成员可以是一个整数,一个数组,一个相关数组(associative array)或者是一个对象。方法在类中被定义成函数形式,在方法中访问类成员变量时,你应该使用$this->name,否则对一个方法来说,它只能是局部变量。
使用new操作符来创建一个对象: $obj=newSomething;然后你可以使用成员函数通过: $obj->setX(5);$see=$obj->getX();echo$see;在这个例子中,setX成员函数将5赋值给对象的成员变量x(不是类的),然后getX返回它的值5。可以象:$obj->x=6那样通过类引用方式来存取数据成员,这不是一个很好的OOP习惯。我强烈建议通过方法来存取成员变量。如果你把成员变量看成是不可处理的,并且只通过对象句柄来使用方法,你将是一个好的OOP程序员。不幸的是,PHP不支持声明私有成员变量,所以不良代码在PHP中也是允许的。继承在PHP中很容易实现,只要使用extends关键字。 classAnotherextendsSomething{private$y;publicfunctionsetY($v){$this->y=$v;}functiongetY(){return$this->y;}}Another类的对象拥有了父类(Something)的全部的数据成员及方法,而且还加上了自己的数据成员和方法。
你可以使用 $obj2=newAnother;$obj2->setY(5);echo$obj2->getY();PHP只支持单继承,所以你不能从两个或两个以上类派生出新的类来。你可以在派生类中重定义一个方法,如果我们在Another类中重定义了getX方法(方法重写),我们就不能使 用Something中的getX方法了。如果你在派生类中声明了一个与基派同名的数据成员,那么当你处理它时, 它将“隐藏”基类的数据成员。
你可以在你的类中定义构造函数。构造函数是一个与类名同名的方法,当你创建一个类的对象时会被调用,例如: classSomething{private$x=null;//新版本的构造函数放弃使用类名,而统一使用__construct()publicfunction__construct($x){$this->x=$x;}publicfunctionsetX($v){$this->x=$v;}publicfunctiongetX(){return$this->x;}//析构函数publicfunction__destruct(){}}所以你可以创建一个对象,通过: $obj=newSomething(6);构造函数会自动地把6赋值给数据变量x。构造函数和方法都是普通的PHP函数(”__“两个下划线,魔术方法),所以你可以使用缺省参数。 publicfunction__construct($x=3,$y=5){}接着: $obj=newSomething();//x=3andy=5$obj=newSomething(8);//x=8andy=5$obj=newSomething(8,9);//x=8andy=9缺省参数使用C++的方式,所以你不能忽略Y的值,而给X一个缺省参数,参数是从左到右赋值的,如果传入的参数少于要求的参数时,其作的将使用缺省参数。
当一个派生类的对象被创建时,只有它的构造函数被调用,父类的构造函数没被调用,如果你想调用基类的构造函数,你必须要在派生类的构造函数中用parent::__construct()调用。可以这样做是在派生类中所有父类的方法都是可用的。 classAnotherextendsSomething{publicfunction__construct(){parent::__construct(5,6);//显示调用基类构造函数}}OOP的一个很好的机制是使用抽象类。抽象类是不能实例化,只能提供给派生类一个接口。设计者通常使用抽象类来强迫程序员从基类派生,这样可以确保新的类包含一些期待的功能。在PHP中没有标准的方法,但是:如果你需要这个特性,可以通过定义基类,并在它的构造函数后加上die 的调用,这样就可以保证基类是不可实例化的,在每一个方法(接口)后面加上die 语句,所以,如果一个程序员在派生类中没有覆盖方法,将引发一个错误。而且因为PHP 是无类型的,你可能需要确认一个对象是来自于你的基类的派生类,那么在基类中增加一个方法来实义类的身份(返回某种标识id),并且在你接收到一个对象参数时校验这个值。当然,如果一个不好的邪恶程序员在派生类中覆盖了这个方法,这种方法就不起作用了,不过一般问题多在懒惰的程序员身上,而不是邪恶的程序员。
当然,能够让基类对程序员无法看到是很好的,只要将接口打印出来做他们的工作就可以了。PHP 5 引入了析构函数的概念,这类似于其它面向对象的语言,如 C++。析构函数会在到某个对象的所有引用都被删除或者当对象被显式销毁时执行。
重载(与覆盖不同)在PHP中不支持,因为PHP是弱类型语言。在OOP中,你可以重载一个方法来实现两个或重多的方法具有相同的名字,但是有不同数量或类型的参数(这要看语言)。PHP 是一种松散类型的语言,所以通过类型重载不起作用,然而通过参数的个数不同来重载也不起作用。
有时在OOP中重载构造函数非常好,这样你可以通过不同的方法创建对象(变量函数)。在PHP中实现它的技巧是: classMyclass{publicfunctionMyclass(){$name=Myclass.func_num_args();//这个函数返回的是传过来参数的个数$this->$name();//这里使用的是一个变量函数,以这个变量的值作为函数的名称调用}publicfunctionMyclass1($x){//code}publicfunctionMyclass2($x,$y){//code}}通过在类中的额外的处理,使用这个类对用户是透明的: $obj1=newMyclass('1');//将调用Myclass1$obj2=newMyclass('1','2');//将调用Myclass2有时这个非常好用。
多态
多态是对象的一种能力,它可以在运行时刻根据传递的对象参数,决定调用哪一个对象的方法。例如,如果你有一个figure的类,它定义了一个draw的方法。并且派生了circle和rectangle 类,在派生类中你覆盖了draw方法,你可能还有一个函数,它希望使用一个参数x,并且可以调用$x->draw()。如果你有多态性,调用哪个draw方法就依赖于你传递给这个函数的对象类型。
多态性在象PHP这样的解释语言(想象一下一个C++编译器生成这样的代码,你应该调用哪一个方法?你也不知道你拥有的对象是什么类型的,好,这不是重点)是非常容易和自然的。所以PHP当然支持多态性。 classCalc{functionniceDrawing($x){//假设这是Board类的一个方法$x->draw();}}classCircle{publicfunctiondraw(){echo画了一个圆;}}classRectangle{publicfunctiondraw(){echo画了一个矩形;}}$board=newCalc;$obj=newCircle(3,187);$obj2=newRectangle(4,5);$board->niceDrawing($obj);//将调用Circle的draw方法$board->niceDrawing($obj2);//将调用Rectangle的draw方法用PHP进行面向对象编程
一些纯化论者(purists)可能会说PHP不是一个真正的面向对象的语言,这是事实。PHP 是一个混合型语言,你可以使用OOP,也可以使用传统的过程化编程。然而,对于大型项目,你可能想/需要在PHP 中使用纯的OOP去声明类,而且在你的项目只用对象和类。
随着项目越来越大,使用OOP可能会有帮助,OOP代码很容易维护,容易理解和重用。这些就是软件工程的基础。在基于web的项目中应用这些概念就成为将来网站成功的关键。
高级OOP技术
在看过基本的OOP概念后,我就可以向你展示更高级的技术:
序列化(Serializing)
PHP不支持永久对象,在OOP中永久对象是可以在多个应用的引用中保持状态和功能的对象,这意味着拥有将对象保存到一个文件或数据库中的能力,而且可以在以后装入对象。这就是所谓的序列化机制。PHP 拥有序列化方法,它可以通过对象进行调用,序列化方法可以返回对象的字符串表示。然而,序列化只保存了对象的成员数据而不包括方法。
在PHP4中,如果你将对象序列化到字符串$s中,然后释放对象,接着反序列化对象到$obj,你可以继续使用对象的方法!我不建议这样去做,因为(a)文档中没有保证这种行为在以后的版本中仍然可以使用。(b) 这个可能导致一种误解,在你把一个序列化后的版本保存到磁盘并退出脚本时。当以后运行这个脚本时,你不能期待着在反序列化一个对象时,对象的方法也会在那里,因为字符串表示根本就不包括方法。
总而言之,PHP 进行序列化对于保存对象的成员变量非常有用。(你也可以将相关数组和数组序列化到一个文件中)。
例子 : $obj=newClassfoo();$str=serialize($obj);//保存$str到磁盘上$obj2=unserialize($str);//几个月以后//从磁盘中装入str你恢复了成员数据,但是不包括方法(根据文档所说)。这导致了只能通过类似于使用$obj2->x来存取成员变量(你没有别的方法!)的唯一办法,所以不要在家里试它。
有一些办法可以解决这个问题,我把它留着,因为对这篇简洁的文章来说,他们太不好。我会很高兴地欢迎在PHP的后续版本中有全序列化的特性。
使用类进行数据存储PHP和OOP一件非常好的事情就是,你可以很容易地定义一个类来操作某件事情,并且无论何时你想用的时候都可以调用相应的类。假设你有一个HTML表单,用户可以通过选择产品ID号来选择一个产品。在数据库中有产品的信息,你想把产品显示出来,显示它的价格等等。你拥有不同类型的产品,并且同一个动作可能对不同的产品具有不同的意思。例如,显示一个声音可能意味着播放它,但是对于其它种类的产品可能意味着显示一个存在数据库中的图片。你可以使用OOP或PHP来减少编码并提高质量:
定义一个产品的类,定义它应该有的方法(例如:显示),然后定义对每一种类型的产品的类,从产品类派后出来(SoundItem类,ViewableItem类,等等),覆盖在产品类中的方法,使它们按你的想法动作。
根据数据库中每一种产品的类型(type)字段给类命名,一个典型的产品表可能有(id,type,price,description,等等字段)...然后在处理脚本中,你可以从数据库中取出type值,然后实例化一个名为type的对象: $obj=new$type();$obj->action();这是PHP的一个非常好的特性,你可以不用考虑对象的类型,调用$obj的显示方法或其它的方法。使用这个技术,你不需要修改脚本去增加一个新类型的对象,只是增加一个处理它的类。
这个功能很强大,只要定义方法,而不去考虑所有对象的类型,在不同的类中按不同的方法实现它们,然后在主脚本中对任意对象使用它们,没有if...else,也不需要两个程序员,只有高兴。
你同意编程是容易的,维护是便宜的,可重用是真的吗?
如果你管理一组程序员,分配工作就是很简单的了,每个人可能负责一个类型的对象和处理它的类。
可以通过这个技术实现国际化,根据用户所选的语言字段应用相应的类就可以了,等等。
拷贝和克隆
当你创建一个$obj的对象时,你可以通过$obj2=$obj来拷贝对象,新的对象是$obj的一个拷贝(不是一个引用),所以它具有$obj在当时的状态。有时候,你不想这样,你只是想生成一个象obj类一样的一个新的对象,可以通过使用new语句来调用类的构造函数。在PHP中也可以通过序列化,和一个基类来实现,但所有的其它类都要从基类派生出来。
进入危险区域
当你序列化一个对象,你会得到某种格式的字符串,如果你感兴趣,你可以调究它,其中,字符串中有类的名字(太好了!),你可以把它取出来,象: $herring=serialize($obj);$vec=explode(':',$herring);//以:为标识符把字符串拆分成一个数组$nam=str_replace(\,'',$vec[2]);所以假设你创建了一个Universe的类,并且强制所有的类都必须从universe扩展,你可以在universe 中定义一个clone的方法,如下: classUniverse{//在新的PHP版本中克隆(__clone())是一个魔术方法,不要和这个方法搞混了functionclone(){$herring=serialize($this);$vec=explode(':',$herring);$nam=str_replace(\,'',$vec[2]);$ret=new$nam;return$ret;}}//然后$obj=newSomething();//从Universe扩展$other=$obj->clone();你所得到的是一个新的Something类的对象,它同使用new方法,调用构造函数创建出的对象一样。我不知道这个对你是否有用,但是Universe类可以知道派生类的名字是一个好的经验。想象是唯一的限制。
模板引擎 Smarty:Smarty的特点是将模板编译成PHP脚本,然后执行这些脚本。很快,非常方便。 Heyes Template Class:一个非常容易使用,但功能强大并且快速的模板引擎,它帮助你把页面布局和设计从代码中分离。 FastTemplate:一个简单的变量插值模板类,它分析你的模板,把变量的值从HTML代码中分离处理。 ShellPage:一个简单易用的类,可以让你的整个网站布局基于模板文件,修改模板就能改变整个站点。 STP Simple Template Parser:一个简单、轻量级并且易于使用的模板分析类。它可以从多个模板中组装一个页面,把结果页面输出到浏览器或者文件系统。 OO Template Class:一个你可以用在自己程序中的面向对象的模板类。 SimpleTemplate:一个可以创建和结构化网站的模板引擎。它可以解析和编译模板。 bTemplate:短小但是快速的模板类,允许你把PHP逻辑代码从HTML修饰代码中分离。 Savant:一个强大且轻量级的PEAR兼容模板系统。它是非编译型的,使用PHP语言本身做为它的模板语言。 ETS - easy template system:可以使用完全相同数据重组模板的模板系统。 EasyTemplatePHP:适用于你的站点的一个简单但是强大的模板系统。 vlibTemplate:一个快速、全能的模板系统,它包含一个缓存和调试类。 AvanTemplate:多字节安全的模板引擎,占用很少系统资源。它支持变量替换,内容块可以设置显示或隐藏 Grafx Software’s Fast Template:一个修改版本的Fast Template系统,它包括缓存功能,调试控制台以及沉默去除为赋值块。 TemplatePower:一个快速、简单、功能强大的模板类。主要功能有嵌套的动态块支持,块/文件包含支持以及显示/隐藏未赋值的变量。 TagTemplate:这个库的功能被设计来使用模板文件,同时允许你从HTML文件检索信息。 htmltmpl: templating engine:一个适用于Python和PHP的模板引擎。它面向希望在项目中分离代码和设计的web应用开发人员。 PHP Class for Parsing Dreamweaver templates:一个分析Dreamweaver模板的简单类,被用于Gallery 2 和WordPress的自定义模块中。 MiniTemplator (Template Engine):针对HTML文件的一个紧凑型模板引擎。对于模板变量和块定义它具有简单的语法。其中块可以嵌套。 Layout Solution:简化网站开发和维护。它拥有常用的变量和页面元素使你不需要重复做页面布局工作。 Cached Fast Template:它已经纳入 FastTemplate ,允许你缓存模板文件,甚至可以在分离的块内容上缓存不同的规格。 TinyButStrong:一个支持MySQL,Odbc,Sql-Server和ADODB的模板引擎。它包含7个方法和两个属性。 Brian Lozier’s php based template engine:只有2K大小,非常快并且是面向对象设计。 WACT:一个从设计中分离代码的模板引擎。 PHPTAL:一个PHP下面的XML/XHTML模板库。 Rong_View_Wudimei:Wudimei开发的国产框架Rong Framework的模板引擎,它类似于smarty,优点是速度快,缺点是模板标签较少,不过够用了。 框架介绍thinkphp
ThinkPHP是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。
PHP认证级别
PHP课程由初级(IFE)、中级(IPE)和高级(IAE)三个部分。 IFE即Index Front-end Engineer的缩写,指数前端工程师的意思。 IPE即 Index PHP Engineer 的缩写,意思是指数PHP工程师。 IAE即 Index architecture/advanced engineer 的缩写,意思是:指数高级/架构工程师。 PHP安全
PHP其实不过是Web服务器的一个模块功能,所以首先要保证Web服务器的安全。当然Web服务器要安全又必须是先保证系统安全,这样就扯远了,无穷无尽。常见的web安全漏洞有:注入攻击,跨站攻击,服务器自身漏洞等,对应的详细解释,详见:扩展阅读中的《WEB安全性-2010_OWASP_TOP10》,这里有很详尽的解释。
PHP的优点学习过程和方法
PHP的语法类似于C,Perl,ASP或者JSP。对于那些对上述之一的语言较熟悉的人来说,PHP太简单了。相反的,如果你对PHP了解较多,那么你对于其他几种语言的学习都很简单了。你只需要很短的时间内将PHP的核心语言特点全部掌握,你可能已经非常了解HTML,甚至你已经知道怎样用编辑设计软件或者手工来制作好看的WEB站点。由于PHP代码能够无障碍的添加进你的站点,在你设计和维护站点的同时,你可以很轻松的加入PHP使得你的站点更加具有动态特性。
数据库连接
PHP可以编译成具有与许多数据库相连接的函数。PHP与MySQL是绝佳的组合,如果再加上Apache服务器,就是相当完美的了。你还可以自己编写外围的函数取间接存取数据库。通过这样的途径当你更换使用的数据库时,可以轻松的更改编码以适应这样的变化。PHPLIB就是最常用的可以提供一般事务需要的一系列基库。
可扩展性
就像前面说的那样,PHP已经进入了一个高速发展的时期。对于一个非程序员来说为PHP扩展附加功能可能会比较难,但是对于一个PHP程序员来说并不困难。
PHP可伸缩性
传统上网页的交互作用是通过CGI来实现的。CGI程序的伸缩性不很理想,因为它为每一个正在运行的CGI程序开一个独立进程。解决方法就是将经常用来编写CGI程序的语言的解释器编译进你的web服务器(比如mod_perl,JSP)。PHP就可以以这种方式安装,虽然很少有人愿意这样以CGI方式安装它。内嵌的PHP可以具有更高的可伸缩性。
PHP免费安装
PHP源代码包安装版:这个版本适合已经有自己独立的网站域名、网站空间的专业网站建设用户。使用方法依然其为简单,只需三步:
第一、到官方网站:下载 PHP源代码包安装版最新版本,解压下载文件,将其中的全部内容上传到你的支持PHP的网站空间
第二、改更文件属性,请将根目录下以PHP为后缀名的文件和”/include/domain.php”和 “/attachments” 和 “/data”文件夹以及文件夹下所有的文件属性改成“可读”、“可写”、“可执行”,通常是“755”。
第三、打开你的网站根目录,系统会自动运行setup安装程序,按提示点下一步操作即可。
友情提示:当你下载我们的软件并看到这份说明时,则说明你一定是对企业网站建设有一定的需求或者你是一个网站建设技术学习者。
文件格式 对于只含有 php 代码的文件,我们将在文件结尾处忽略掉 ?>。这是为了防止多余的空格或者其它字符影响到代码。 例如:
$foo = 'foo'; 缩进应该能够反映出代码的逻辑结果,尽量使用四个空格,禁止使用制表符TAB,因为这样能够保证有跨客户端编程器软件的灵活性。 例如: if(1==$x){$indented_code=1;if(1==$new_line){$more_indented_code=1;}}变量赋值建议保持相等间距和排列。 例如: $variable='demo';$var='demo2';每行代码长度应控制在80个字符以内,最长不超过120个字符。因为 linux 读入文件一般以80列为单位,就是说如果一行代码超过80个字符,那么系统将为此付出额外操作指令。这个虽然看起来是小问题,但是对于追求完美的程序员来说也是值得注意并遵守的规范。 每行结尾不允许有多余的空格。 Php文件记事本编辑乱码问题
一般情况下,记事本编辑器在对文件进行完编辑并保存之时,其默认编码为ANSI,中文。然则更多的时候,php在语言环境设置时语言多数为utf-8,直接保存并用于apache等http-server解析后就会出现乱码。
为此,应该注意在用记事本编辑完后可将文件用“另存为”的方式对文件进行保存,并将“文件类型”选择“所有文件”,编码与文件指定语言编码一致即可。
算数运算符
PHP 的运算符包括算术运算符、赋值运算符、比较运算符和逻辑运算符。
算数运算符:
加,减,乘,除,取模(取余)  +、-、*、/、%
赋值运算符:(以下解释在许多书中有所不同)
赋值,加赋值,减赋值、乘赋值、除赋值,连字赋值
=、+=、-=、*=、/=、.=
位运算符:
位与、位或、位亦或、位非、左移、右移
&、|、^、~、<<、>>
比较运算符:
等于、全等于、不等于、不全等于、大于、小于、大于等于、小于等于
==、===、!=(<>)、!==、>、<、>=、<=
逻辑运算符:
逻辑与、逻辑或、逻辑非、逻辑亦或
&&、||、!、xor
字符串运算符:
. 连接两个字符串

如何用Canvas绘制多种图形

PHP中使用GD库创建圆形饼图?

我爱编程网(https://www.52biancheng.com)小编还为大家带来PHP中使用GD库创建圆形饼图?的相关内容。

在php中,有一些简单的图像函数是可以直接使用的,但大多数要处理的图像,都需要在编译PHP时加上GD库。除了安装GD库之外,在PHP中还可能需要其他的库,回龙观电脑培训认为这可以根据需要支持哪些图像格式而定。不同的GD版本支持的图像格式不完全一样,最新的GD库版本支持GIF、JPEG、PNG、WBMP、XBM等格式的图像文件,此外还支持一些如FreeType、Type1等字体库。通过GD库中的函数,可以完成各种点、线、几何图形、文本及颜色的操作处理,也可以创建或读取多种格式的图像文件。

在PHP中,通过GD库处理图像的操作都是先在内存中处理,操作完成以后再以文件流的方式输出到浏览器或保存在服务器的磁盘中。创建一个图像应该完成如下所示4个基本步骤。

①创建画布:所有的绘图设计都需要在一个背景图片上完成,而画布实际上就是在内存中开辟的一块临时区域,用于存储图像的信息。以后的图像操作都将基于这个背景画布,该画布的管理就类似于我们在画画时使用的画布。

②绘制图像:画布创建完成以后,就可以通过这个画布资源,使用各种画像函数设置图像的颜色、填充画布、画点、线段、各种几何图形,以及向图像中添加文本等。

③输出图像:完成整个图像的绘制以后,需要将图像以某种格式保存到服务器指定的文件中,或将图像直接输出到浏览器上显示给客户。但在图像输出之前,一定要使用header()函数发送Content-type通知浏览器,这次发送的是图片不是文本。

④释放资源:图像被输出以后,画布中的内容也不再有用。出于节约系统资源的考虑,需要及时清楚画布占用的所有内存资源。

我们先来了解一下一个非常简单的创建图像脚本。在下面的脚本文件image.php中,按前面介绍的绘制图像的四个步骤,使用GD库动态输出一个扇形统计图。

以上就是如何用Canvas绘制多种图形全部内容,更多相关信息,敬请关注我爱编程网。更多相关文章关注我爱编程网:www.52biancheng.com

免责声明:文章内容来自网络,如有侵权请及时联系删除。
与“如何用Canvas绘制多种图形”相关推荐
如何使用Python的Pandas库绘制折线图
如何使用Python的Pandas库绘制折线图

python可视化数据分析常用图大集合(收藏)python数据分析常用图大集合:包含折线图、直方图、垂直条形图、水平条形图、饼图、箱线图、热力图、散点图、蜘蛛图、二元变量分布、面积图、六边形图等12种常用可视化数据分析图,后期还会不断的收集整理,请关注更新!以下默认所有的操作都先导入了numpy、pandas、matplotlib、seaborn一、折线图折线图可以用来表示

2023-12-24 11:04:43
如何采用Python语言绘制一条彩色的蟒蛇
如何采用Python语言绘制一条彩色的蟒蛇

python画五角星代码python是一种强大的编程语言,通过使用python,我们可以进行各种各样的图案、语句、动画等等编程。你知道用python画五角星的代码是什么吗?今天小编就来为大家详细演示一遍。希望通过这个小小的例子,能让你的python编程技术更进一步!1.导入python的turtle模块。具体如图所示。2.开始画五星为了填充,需要开始填充begin_fil

2024-03-04 08:22:58
在python中用Graphics绘图怎么上色
在python中用Graphics绘图怎么上色

在python中用Graphics绘图怎么上色# coding:utf8from graphics import *win = GraphWin()pt = Point(75, 50) # 设定圆心pt.draw(win)cir = Circle(Point(150, 50), 25) # 设定圆形cir.draw(win)cir.setFill('blue') # 给圆形上色cir =

2024-01-03 13:35:57
PHP算法:如何判断一个已知坐标点存在于一个多边形内
PHP算法:如何判断一个已知坐标点存在于一个多边形内

PHP算法:如何判断一个已知坐标点存在于一个多边形内在多边性的存储中,每一个多边形都是由一系列连续的点组成,例如保存为数组Polygon[5],表示这个多边形是由5个点组成,这5个点顺序地存储在了数组Polygon之中。就如同走路一般地划线,从数组的第一个点连到第五个点,多边行就构造出来了。在图形编程中,坐标的利用是不可忽视的。在这里判断一个点是否在多边行内部(可以包括线上)就要利用到各

2025-02-12 05:07:23
我的世界用scratch如何制作?
我的世界用scratch如何制作?

我的世界用scratch如何制作?Scratch是专为儿童开发的编程语言,用于拓展他们的思维。今天,我将分享如何在Scratch中创建我的世界的制作方法。1.打开浏览器,在搜索栏中输入“Scratch在线编辑器”进行搜索,并点击前往它的官网。2.在Scratch在线编辑器网站中,会自动出现切换语言的选择框,选择简体中文。3.设置好语言后,就可以开始编程了。开始你的我的世界编程

2024-01-05 06:08:40
如何用python实现巴斯卡三角形算法
如何用python实现巴斯卡三角形算法

如何用python实现巴斯卡三角形算法1、何为帕斯卡三角形(巴斯卡三角形)其实,帕斯卡三角形就是杨辉三角形,是二项式系数的一种写法,从第0层开始,依次类推,如图所示:比如第2层中的121对应的是幂指数为2的二项式运算(a+b)^2=a^2+2ab+b^2的系数2、如何用python实现该算法在碰到难的题目,一时不知道如何下手解决的时候,不要慌,首先分析该问题,然后找

2024-01-10 07:51:03
少儿图形化编程主要学什么
少儿图形化编程主要学什么

少儿图形化编程主要学什么少儿图形化编程主要学什么如下:少儿图形化编程主要学逻辑思维和编程思维。少儿图形化编程是通过图形化界面来实现编程思维,并通过实践掌握编程思维的方法和技巧。逻辑思维是指通过一定的规则和原则来推理和判断的思维方式,在少儿图形化编程的学习过程中,学生可以学习到如何通过图形化界面来实现逻辑思维,并通过实践掌握逻辑思维的方法和技巧。少儿编程现在比较主流的学

2024-02-15 13:32:01
如何手动控制 打开 “Java控制台”
如何手动控制 打开 “Java控制台”

Java控制台实现程序importjava.util.HashMap;importjava.util.Map;importjava.util.Scanner;publicclassStr{publicstaticStringuserName;publicstaticStringpass;/***@paramargs*/publicStringtoSt

2024-06-09 01:20:57