整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
这是一款使用 CSS 制作的优雅漂亮的圆形时钟，时钟清爽简洁，看起来非常舒服。
演示地址：
https://www.361zy.com/demo/334/
下载地址：
https://cloud.06dn.com/s/Jnoia
解压码：pWuLBIaF
Pad作为一个我们可以方便携带的便携设备，有着比笔记本更灵活的使用场景。如果能用iPad来写代码的话，对于很多朋友来说相信都是一大好消息。下面推荐几款能够在iPad上编写和运行python程序的app，当然也有介绍能够运行多种语言的app，希望给想在iPad上编程的朋友带来帮助。大家也可以推广到其他编程语言，寻找合适的app！
本文会以在 iPad上写python代码为主，依次介绍carnets、pythonista和code app等几款软件，也会给大家介绍几款提升iPad上写代码效率的工具。但是本文介绍的几款app中，不止有python的编译器，也有可以编译运行多种不同语言的app，还会推广涉及到远程编译的方法以实现多种不同语言的编译运行，其中本人觉得最好用的code app放在最后讲解，也是可以编译和运行语言种类最多的app，一定要看到最后噢！！
简介
carnets是一款基于jupyter的python编译器，在app store里面搜索carnets，会出现两个版本，一个为carnets-jupyter，另一个为carnets-jupyter（with scipy），它们之间区别在于with scipy版本加入了scipy、sklearn、seaborn以及coremltools这几个库，对于需要用python从事科研的朋友很有用。此外，也支持安装一些纯python的第三方库。
carnets-jupyter（with scipy）还支持notebook和jupyterlab的切换。但是缺点在于占用内存空间更大（1.6G，对比之下标准版本为1.1G）
具体使用介绍（以scipy版本为例）
首先打开app，点击creat document，就会自动创建一个Untitled.ipynb文件并打开
可以看到，界面与电脑上的jupyter notebook是几乎一样的，操作方法也与电脑上的版本类似。
我们点击左上角的文件，再点击打开，就能来到文件管理界面
再点击Nbextension，我们就能看到jupyter notebook的插件功能，和电脑上是完全一致的，把上面的勾选关掉，就可以使用插件功能了。
除此之外，在系统设置里面，可以更改语言设置，也可以更改文件储存位置等，也可以在distribution里面把软件界面设置成retrolab，点击view再点击open jupyterlab，我们就能打开jupyterlab的界面，在iPad上使用jupyterlab进行编程。
其余的使用与电脑端类似，可以参考电脑端jupyter的使用方法。
简单测试
我们简单跑一下代码，以及尝试装一个纯python的第三方库
总结
总的来说，carnets很好解决了在iPad上使用python进行编程的问题，并且支持许多热门的第三方库，如numpy、matplotlib、pandas等，并且对于（with scipy）版本还支持scipy、sklearn等，在很大程度上能满足python学习的需求，也能满足一定的专业程序员的需求。
不足之处在于，notebook可能对于一部分人来说使用起来不习惯，以及受限于iPad OS，只能安装一些纯python的库，一些深度学习的第三方库可能安装不了。
简介
pythonista是一款python的IDE，界面较为特别，内置了numpy、matplotlib等热门第三方库。但是遗憾的是并不支持安装第三方库（好像有曲线救国的方法）。它有很多特色的小功能，比如内置了很多生动形象的小程序，对于初学者来说是很好的学习参考，对于已经掌握python的程序员来说也可以在此基础上开发一些小程序。pythonista支持python ui的开发，能做一些很精美的程序。
具体使用介绍
打开app，点击New file，点击Empty script来创建一个新的python文件，把路径设置在This iPad然后点击create创建就可以。可以看到除了纯python文件，也可以创建带UI的python文件（这方面我不是很擅长，读者可以自行尝试）。
除此之外，点击左上角可以查看文档，再点击返回可以查看全局文档，进行文档管理。
点击This iPad下的example可以查看软件自带的一些小程序，点击运行可以查看对应的功能，比如这个时钟小程序
除此之外还有各种形式的程序，各位读者可以自行查看
简单测试
我们在pythonista上创建一个脚本，并运行一个简单的例子
可以看出，运行结果是正确的。
总结
pythonista是一款比较专注于python，界面比较独特的app。上面支持普通的python脚本文件，也支持python UI文件，并且提供了大量的例子，可供初学者学习，也增加了趣味性。
缺点是由于官方并不支持自行通过pip安装第三方库，使用起来只能局限于app自带的库，会有所不方便。app也已经有很长一段时间没更新了，所以体验可能稍差。
简介
Code app是一款界面类似vscode的代码编辑器，能够支持5种语言的本地编译以及40多种语言的在线编译。运行界面和操作逻辑与vscode非常相似，内置了linux终端，支持近70种命令（ls、cd、nslookup等），并且支持快捷键自定义，对鼠标对支持也非常良好，功能十分强大。
具体使用介绍
打开app，可以看到与vscode类似的界面，我们可以创建新文件，也可以打开已有文件，也可以使用git clone来拷贝github上的项目。
我们点击新文件，可以创建不同语言的文件，我们在这里创建一个python脚本文件
创建文件后，可以看到运行的是本地的python3.9.2。输入几行代码，可以看到代码高亮与电脑端vscode是类似的，但是在写代码过程中不支持代码提示，这点比较遗憾
打开左下角的设置，可以更改主题或字体大小，也可以查看app支持的本地和远程编译的语言。
终端（terminal）可以按左边的按钮打开或者关闭，可以支持的命令有70多种，使用起来十分方便。使用pip命令也可以安装纯python第三方库。
其他使用可以参考电脑端vscode的使用，感兴趣的读者可以下载使用一下。
简单测试
我们运行上面的python代码，运行正常
我们再测试一下别的语言，如C++，运行结果也正常。
其他语言以及在线编译功能读者可以自行尝试。
总结
code app是一款功能非常强大的iPad代码编辑器，支持多种语言的编译功能，文件管理也非常完善，可以在一定程度上满足专业程序员的需求。
美中不足的是code app不支持代码提示，也不支持debug，期待后续更新可以加上这些功能。如果实现的话，应该算得上是iPad上最好用带有本地编译功能的编译器了。
首先键盘肯定是要配一个的，要不然在屏幕上打字一来效率不高，二来屏幕大小就这么点，再被键盘占去一部分空间后写代码就会显得很局促。
在这里我给大家推荐一款罗技的无线蓝牙键盘，我自己本人也是罗技K380用户，键盘的手感很不错，质感也很好，最主要的是这款键盘方便携带，与iPad简直是绝配！！！并且支持三台不同设备之间的自由切换，可以同时配对你的iPad、电脑和手机，实现设备间办公无缝衔接。K580也是不错的选择，提供了一个平板或者手机的支撑位，使用起来更方便，并且也能支持两台设备之间的切换。大家可以按需选择。
除此之外，鼠标也可以配备一个，这样可以获得更加接近电脑上写代码的感觉，提升效率。大家也可以考虑一下罗技家的蓝牙鼠标，非常轻薄便于携带，是随时随地在iPad上写代码的好帮手！
以上我们总结了几款使用体验非常不错的python编译器，以及code app这个能够支持多种语言的编译器：
除了上面提到的几款app，其实iPad上也有不少其他好用的编译器，比如pyto等。也有许多面向其他语言的编译器，大家可以在app store上寻找。
但是由于iPad上只支持纯python的第三方库，有些专业程序员可能对其他第三方库有需求，或者说想运行编译其他更多语言，这个问题可以通过远程编译的方式来解决。如果我们有云服务器或者个人主机的话，可以通过在主机上配置code-server或者jupyter server的方式在iPad上实现远程编译，这个具体的教程就不在这展开了，感兴趣的读者可以搜索网上的教程，我后续可能也会写一篇关于通过远程服务器在iPad上写程序的文章，欢迎大家关注！
以上有错误的地方也欢迎大家指正，互相交流！
anvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。
没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。
在html源码中只要像普通标签那样使用即可，比如下面的示例，但是在一些老旧的浏览器在中是不支持canvas的，因此我们常在canvas标签中提示用户，具体代码如下所示。
<canvas id="myCanvas" width="300px" height="300px"> 您的浏览器不支持canvas,请尝试更新浏览器 </canvas>
或者使用JS脚本来进行检测，使用JavaScript代码检测是否支持canvas的代码示例如下：
var myCanvas=document.getElementById('myCanvas');
if (myCanvas.getContext) {
myCanvas.log('你的浏览器支持Canvas!');
} else {
myCanvas.log('你的浏览器不支持Canvas!');
}
由于绘制canvas通常代码需要比较多，我们常常使用引用js的方式来绘制canvas,这里我们也是引入js文件来操作canvas，HTML源码如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Canvas绘制始终效果</title>
<style>
canvas{
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="300px" height="300px">
您的浏览器不支持Canvas,请尝试更新浏览器
</canvas>
<script src="js/canvas.js"></script>
</body>
</html>
创建js文件
根据实际的需要创建js文件,这里我引入的地址是js/canvas.js，因此需要和HTML源码文件同级下创建js文件夹，然后再js文件夹中创建canvas.js文件。
绘制测试示例
绘制效果如下
<div style="align: center"> <img src="http://www.zhoutao123.com:9000/upload/2017/12/4s4ptf692qhjtq6f1pdddj1l9b.png" width="200"> </div>
预备代码
这里保持一些全局变量，方便后面使用的
//获取canvas的上下文环境
var myCanvas=document.getElementById('myCanvas')
var ctx=myCanvas.getContext('2d')
//获取canvas的宽度和高度
var canvasWidth=myCanvas.width
var canvasHeight=myCanvas.height
身为前端老司机，还是得分享些干货精品学习资料的，前端资料获取方式：
关注后，手机客户端点击我的主页面，右上角有私信，请私信回复：【学习】
已经设置好了关键词自动回复，所以回复的时候请注意关键词哟~
绘制背景
我们首先绘制背景，分析背景可以看到，他是由一个大的黑色与圆圈包裹，里面有一个灰色的略小的圆圈，在灰色圆圈的周围均匀分布着时钟点，这些时钟点每逢5的倍数的时候突出显示，否则就是灰色显示，这就是我们的需求，具体注释在代码中可以详细看到。
//开始绘制背景
function drawBackground() {
//未防止当前画布环境被破坏,因此我们保存当前的绘制环境
ctx.save()
//开始绘制路径
ctx.beginPath()
//配置绘制颜色,我们首先绘制的是黑色圆圈,因此我们配置为黑色
ctx.strokeStyle='#000000'
//绘制宽度为6个像素
ctx.lineWidth=6
//开始绘制圆,圆心未知是宽和高的一半,半径是宽度的一半减去圆圈的宽度
//这里最后的两个参数需要注意
//指的是绘制圆圈的起点和绘制的弧度
//我们从0点开始绘制然后绘制2*PI个弧度,也就是一个正圆
//这里的点是从x轴正方向开始的
ctx.arc(canvasWidth/2,canvasHeight/2,canvasHeight/2-3,0,2*Math.PI)
//配置完成,开始绘制
ctx.stroke()
//同样的需求开始绘制灰色的圆圈
ctx.beginPath()
ctx.strokeStyle='#CCCCCC'
ctx.lineWidth=1
ctx.arc(canvasWidth/2,canvasHeight/2,(canvasWidth/2-15),0,2*Math.PI)
ctx.stroke()
//将原点从左上角0,0移动到中心位置
ctx.translate(canvasWidth/2,canvasHeight/2)
//需要现实的数字
//这是可以看到,数字是从3开始的,也验证了我们的之前说的绘制从x轴正方向开始
//在时钟界面x轴正方向就是3点钟
var colorNumber=[3,4,5,6,7,8,9,10,11,12,1,2]
//配置字体和对齐方向
ctx.font="25px Arial";
ctx.textAlign="center"
ctx.textBaseline="middle"
//循环遍历,开始绘制数字
for(var i=0;i<colorNumber.length;i++){
var dep=2 * Math.PI /12 * i;
ctx.fillText(colorNumber[i],(canvasWidth/2-30) * Math.cos(dep),(canvasHeight/2-30)* Math.sin(dep))
}
//绘制时钟点
for(var i=0;i<60;i++){
var rad=2 * Math.PI /60 * i;
var x=Math.cos(rad) * (canvasHeight/2-16)
var y=Math.sin(rad) * (canvasHeight/2-16)
ctx.beginPath();
//如果是5的倍数,使用黑色填充,否则使用灰色填充
if (i % 5===0){
ctx.fillStyle="#000"
ctx.arc(x,y,2,0,2*Math.PI,false)
}else{
ctx.fillStyle="#CCC"
ctx.arc(x,y,2,0,2*Math.PI,false)
}
ctx.fill()
}
}
绘制时针
绘制时针、分针以及秒针的理念是先绘制0时刻的样子，然后旋转画布一定的弧度，从而达到转动的效果。
//绘制时针
function drawHours(hours,minte) {
//保存环境
ctx.save()
//计算时钟角度和偏离的角度
var rad=2 * Math.PI / 12 * hours;
var rad2=2 * Math.PI / 12 /60 * minte;
//旋转画布
ctx.rotate(rad+rad2)
ctx.beginPath();
//配置绘制效果
ctx.lineWidth=6
ctx.strokeStyle="#000"
//线的两端保持圆角
ctx.lineCap="round"
//将绘制点移动到中心原点以下10个像素点
ctx.moveTo(0,10);
//绘制一个线
ctx.lineTo(0,-(canvasWidth-150)/2)
ctx.stroke()
//恢复之前保存的环境
ctx.restore()
}
绘制分针和秒针
绘制分针和秒针的方法和时针一样，仅仅是绘制的颜色和宽度不一样，这里不再详细赘述.
//绘制分针
function drawMinute(minute) {
ctx.save()
var rad=2 * Math.PI / 60 * minute;
ctx.rotate(rad)
ctx.beginPath();
ctx.lineWidth=3
ctx.strokeStyle="#000"
ctx.lineCap="round"
ctx.moveTo(0,10);
ctx.lineTo(0,-(canvasWidth-100)/2)
ctx.stroke()
ctx.restore()
}
//绘制秒针
function drawSecond(second) {
ctx.save()
var rad=2 * Math.PI / 60 * second;
ctx.rotate(rad)
ctx.beginPath();
ctx.lineWidth=3
ctx.strokeStyle="#f00"
ctx.lineCap="round"
ctx.moveTo(0,20);
ctx.lineTo(0,-(canvasWidth-40)/2)
ctx.stroke()
ctx.restore()
}
绘制中心白点
时针、分针和秒针的中心集合点出有白点，类似某个机械元件，将三个针锁住，我们只要绘制原点即可。
//绘制原点
function drawPoint() {
ctx.beginPath()
ctx.fillStyle="#FFF"
ctx.arc(0,0,3,0,2*Math.PI)
ctx.fill()
}
开始时钟
我们将当前时间绘制到始终上面即可,需要注意的是，在绘制之前需要将之前绘制的东西清除掉。
//开始启动时针
function startColor() {
//清除画布内容
ctx.clearRect(0,0,canvasWidth,canvasHeight)
var date=new Date()
var hour=date.getHours()
var minute=date.getMinutes()
var second=date.getSeconds()
drawBackground()
drawHours(hour,minute)
drawMinute(minute)
drawSecond(second)
drawPoint()
ctx.restore()
}
设置定时重新绘制
要想动态的让时钟跑起来，我们需要设置一个定时执行器，每秒更新一次,这样始终就完全动起来了
*请认真填写需求信息，我们会在24小时内与您取得联系。
