0°

(十四)Hello, World! – 使用HTML5 Canvas绘图—PHPoC

硬件

  • PHPoC Blue(+ USB WLAN)或PHPoC Black(+以太网)
  • Micro USB转USB线(将源代码上传到PHPoC设备)

快速步骤

此示例的源代码是PHPoC支持包(PSP)的一部分。你需要:

  • 下载PHPoC支持包
  • 示例\ p4s \ 05.html5_graphics \ 00.hello上传到PHPoC Blue / Black。
  • 配置网络参数(例如WiFi SSID,密码,IP地址……)。
  • 使用PC或智能手机上的Web浏览器访问PHPoC上的网页

如果您是第一次使用PHPoC,请参阅如何使用PSP

源代码

源文件包括:index.php文件,其中包含网页的源代码。它仅在响应Web浏览器的请求时运行。

index.php 

[完整代码]

PHP代码:

<html>
<head>
<title>PHPoC / echo system("uname -i")?>title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style> body { text-align: center; } style>
head>
<body>

<canvas id="hello" width="400" height="200">canvas>

<script>
var c = document.getElementById("hello");
var ctx = c.getContext("2d");

ctx.font = "40px Arial";
ctx.strokeStyle = "#000000";
ctx.strokeText("hello, world!"10050);
script>

body>
html>

[说明] index.php文件

源代码由HTML,CSS,JavaScript和PHPoC代码组成。 PHPoC代码在PHPoC设备上进行解释。 PHPoC代码可以添加/更新HTML,CSS或JavaScript代码的内容。在PHPoC中解释PHPoC代码后,剩下的代码是客户端代码,并返回到Web浏览器。Web浏览器接收此代码并对其进行解释以显示网页。

  • HTML:描述网页的结构
  • CSS:描述HTML元素的显示方式
  • JavaScript的:这段代码在画布上绘制“hello,world!\”
  • 代码:
<SCRIPT>
	var c = document.getElementById(“hello”);
	var ctx = c.getContext(“2d”);

	ctx.font =“40px Arial”;
	ctx.strokeStyle =“#000000”;
	ctx.strokeText(“你好,世界!”,100,50);
SCRIPT>
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论