example code for ajax refresh and canvas drawing
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="static/jquery.min.js"></script>
<script src="static/Chart.bundle.js"></script>
<script src="static/utils.js"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
border: 1px solid black;
}
</style>
<script>
var x = 0; // canvas画布原点x
var y = 0; // canvas画布原点y
var x_base = x; // 我们要画的波形图的最后一个点的x坐标
var y_base = 250; // 我们要画的波形图的最后一个点的y坐标
var arrPoint = []; // 用于保存已经波形图的轨迹点
var index = 0; // 这个我是用来打日志用的..下面为了看清除了多少次canvas画布
var step = 10; // x轴每次走的步长
var width=500; // 这个是画布宽度
var height=500; // 这个是画图高度
var value = 0;
(function (){
// 首先让我们的函数周期调用
var itv = setInterval(function(){
// 获取canvas对象和context,并进行一系列初始化
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = "rgb(255,0,0)";
context.fileStyle = "rgb(255,0,0)";
context.width = 400;
context.height = 400;
var grd12 = context.createLinearGradient(100,100,500,500);
grd12.addColorStop(0,'pink');
grd12.addColorStop(1,'white');
context.fillStyle = grd12;
context.fillRect(0,0,500,500);
value = value+1;
//y_base = 250 + Math.random()*20;
//$("#cnt").html(y_base.toString());
var urlStr = "/refreshCnt?time="+Math.random();
$.ajax({url:urlStr,
success:function(data)
{
//alert(data);
$("#cnt").html(data);
y_base = 150+Number(data)%50;
$("#cnt").html(y_base.toString());
//y_base = 150+ Math.random()*20;
},
error:function()
{
$("#cnt").html("error");
//y_base = 250+ Math.random()*20;
}
});
// 画图之前首先清理一下我们的画布,四个参数.
// 1.坐标原点x
// 2.坐标原点y
// 3.要清理的宽度(这里宽度用的x_base是因为canvas画布的原点不断向左移动，变相的等于画布不断变宽
// 之所以减一个step是需要看下文,因为在下文中,x_base每一次都会增加一个step,而我们在清理画布的时候,
// 我们的画布原点还没有被移动,相当于我们在清除画布时,我们的画布宽度还没有增加,所以要减一个step,当然不减也可以,没事儿)
// 4.画布高度
// context.clearRect(0,0,width,height);
// 向数组中添加数据,将我们每一次目标到达的终点坐标添加到数组中.这里我设置的条件是,保证数组大小不会超过我的画布宽度除以step个
// 目的是针对画布定的,就是每一次我只画画布这么大小的图
var obj = {};
obj.x = x_base;
obj.y = y_base;
console.log("add" + obj.x +"," + obj.y);
if(arrPoint.length>(width/step)){
arrPoint.splice(0,1);
console.log(arrPoint);
}
arrPoint.push(obj);
// 开始画了,在画之前先将所有的图形都画出来
context.beginPath();
for(var i = 0; i < arrPoint.length; i++){
context.lineTo(i*step,arrPoint[i].y);
}
// 再一次性将所有图形呈现在html上
context.stroke();
context.closePath();
x_base += step;
// OK,这时候已经花完了,现在要算一算我们的下一个目标点的坐标了,算完了以后,保存在一个全局变量中
// 等待下次再执行画图函数时,将变量添加到数组中,让canvas画图使用
},100)
})()
</script>
</head>
<body>
<h1 id="cnt"></h1>
<canvas id="canvas" width="500" height="500">
你这不行啊..不支持canvas
</canvas>
</div>
</body>
</html>run.py
from flask import Flask, render_template, request
from flask import jsonify
import json
app = Flask(__name__)
app.config['SECRET_KEY'] = "dfdfdffdad"
testCnt = 1
@app.route('/')
def index():
return render_template('index.html')
@app.route('/mystring')
def mystring():
return 'my string'
@app.route('/refreshCnt')
def refreshFromAjax():
global testCnt
testCnt = testCnt + 1
#print(random)
return json.dumps(testCnt)
@app.route('/refreshCnt2')
def refreshFromAjax2():
global testCnt
testCnt = testCnt + 1
#print(random)
return json.dumps(testCnt)
@app.route('/dataFromAjax')
def dataFromAjax():
test = request.args.get('mydata')
print(test)
return 'dataFromAjax'
@app.route('/mydict', methods=['GET', 'POST'])
def mydict():
print('post')
if request.method == 'POST':
a = request.form['mydata']
print(a)
d = {'name': 'xmr', 'age': 18}
return jsonify(d)
@app.route('/name', methods=['POST'])
def getname():
firstname = request.form['firstname']
lastname = request.form['lastname']
d = {'name': firstname + ' ' + lastname, 'age': 18}
print(d)
return jsonify(d)
@app.route('/myform', methods=['POST'])
def myform():
print('post')
a = request.form['FirstName']
print(a)
d = {'name': 'xmr', 'age': 18}
return jsonify(d)
@app.route('/mylist')
def mylist():
l = ['xmr', 18]
print('mylist')
return json.dumps(l) # 用jsonify前端会出错
@app.route('/mytable')
def mytable():
table = [('id', 'name', 'age', 'score'),
('1', 'xiemanrui', '18', '100'),
('2', 'yxx', '18', '100'),
('3', 'yaoming', '37', '88')]
print('mytable')
data = json.dumps(table)
print(data)
return data
if __name__ == '__main__':
app.run(host="0.0.0.0", port=8090)
1334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
