python Canvas,Canvas教程
Canvas是HTML5的新组件。它就像一个幕布，你可以在上面绘制各种图表、动画等。用JavaScript。
在没有画布的时代，绘图只能借助Flash插件来实现，页面要和JavaScript、Flash交互。有了Canvas，我们就不再需要Flash了，可以直接用JavaScript来完成绘制。
画布定义了一个指定大小的矩形框，我们可以在其中随意绘制：
由于浏览器对HTML5标准的支持并不一致，通常会在内部添加一些解释性的HTML代码。如果浏览器支持Canvas，它会忽略内部HTML。如果浏览器不支持Canvas，它将显示内部HTML:
现价：25.51英镑
在使用Canvas之前，使用Canvas.getContext测试浏览器是否支持Canvas:
您的浏览器不支持画布。
您的浏览器不支持画布。
使用严格的；
-
var canvas=document . getelementbyid( test-canvas )；
if (canvas.getContext) {
Console.log(您的浏览器支持Canvas！);
}否则{
Console.log(您的浏览器不支持画布！);
}
getContext(2d )方法让我们获得一个CanvasRenderingContext2D对象，所有的绘制操作都需要通过它来完成。
var CTX=canvas . get context( 2d )；
如果需要画3D怎么办？5 HTML5还有一个WebGL规范，允许在画布上绘制3D图形：
GL=canvas . get context( web GL )；
在这一节中，我们只着重画2D图形。
绘制形状
我们可以在画布上画出各种形状。在画图之前，我们需要知道画布的坐标系：
Canvas的坐标以左上角为原点，水平右轴为X轴，垂直下轴为Y轴，像素为单位，所以每个点都是非负整数。
CanvasRenderingContext2D对象有几种绘制图形的方法：
使用严格的；
定义变量
canvas=document.getElementById(测试-形状-画布)，
CTX=canvas . get context( 2d )；
-
ctx.clearRect(0，0，200，200)；//在(0，0)位置擦除大小为200x200的矩形。擦除意味着使该区域透明。
ctx.fillStyle= # dddddd//设置颜色
ctx.fillRect(10，10，130，130)；//用130x130的(10，10)位置大小对矩形进行着色。
//用Path绘制复杂路径：
var path=new path 2d()；
path.arc(75，75，50，0，数学。PI*2，真)；
path.moveTo(110，75)；
path.arc(75，75，35，0，数学。圆周率，假)；
path.moveTo(65，65)；
path.arc(60，65，5，0，数学。PI*2，真)；
path.moveTo(95，65)；
path.arc(90，65，5，0，数学。PI*2，真)；
CTX . stroke style= # 0000 ff ；
ctx.stroke(路径)；
绘制jjdzc
画jjdzc就是在指定位置输出jjdzc。可以设置字体、样式、阴影等。jjdzc的，和CSS完全一致：
使用严格的；
定义变量
canvas=document . getelementbyid( test-text-canvas )，
CTX=canvas . get context( 2d )；
-
ctx.clearRect(0，0，canvas.width，canvas . height)；
CTX . shadowoffsetx=2；
CTX . shadowoffsety=2；
CTX . shadow blur=2；
ctx.shadowColor= # 666666
ctx.font= 24px Arial
ctx.fillStyle= # 333333
Ctx.fillText(阴影文本，20，40)；
Canvas不仅可以绘制基本的形状和jjdzc，还可以实现动画、缩放、各种滤镜、像素转换等高级操作。如果你想实现一个非常复杂的操作，考虑下面的优化方案：
通过创建一个不可见的画布进行绘制，然后将最终的绘制结果复制到页面的可见画布上；
尽量用整数坐标代替浮点数；
你可以创建多个重叠的画布来绘制不同的图层，而不是在一个画布上绘制非常复杂的图表；
如果背景不变，可以直接标注，放在最下面。
练习
请根据163得到的JSON数据画出最近30个交易日的k线图。数据已被处理成包含一组对象的数组：
window . draw stock=function(data){
定义变量
canvas=document . getelementbyid( stock-canvas )，
MAX_X=canvas.width，
MAX_Y=canvas.height，
CTX=canvas . get context( 2d )；
var low=data . reduce(function(prev，x) {
return x.low prev.low？x:prev；
});
var high=data . reduce(function(prev，x) {
return x.high prev.high？x:prev；
});
var chg=high . high-low . low；
//索引范围：
var最低=数学。地板(低。低-chg * 0.1)；
定义变量最高=数学。楼层(高。高chg * 0.1 1)；
var calcY=function (idx) {
return MAX_Y *(最高- idx) /(最高-最低);
};
var drawAtX=function (x，k) {
定义变量
tmp，
y1=calcY(k.open)，
y2=calcY(k . close)；
if (y1 y2) {
tmp=y1
y1=y2
y2=tmp
}
ctx.fillStyle=(k.open k.close)？# 00ff 00 : # ff 0000 ；
ctx.fillRect(x，calcY(k.high)，1，calcY(k . low)-calcY(k . high))；
ctx.fillRect(x-2，y1，5，y2-y1)；
};
ctx.clearRect(0，0，MAX_X，MAX _ Y)；
ctx.font= 12px serif
ctx.textAlign= right
ctx.fillStyle= # 000000
CTX。填充文本(字符串(数学。楼层(高。高))、40、15)；
CTX。填充文本(字符串(数学。地板(低。低))、40、MAX _ Y-20)；
var i，x；
for(I=0；我
x=i * 8 50
drawAtX(x，data[I])；
}
};
使用严格的；
窗户。loadstockdata=function(r){
定义变量
NUMS=30，
数据=r.data
如果(数据长度NUMS) {
数据=数据。切片(数据。长度——NUMS)；
}
data=data.map(函数(十){
返回{
日期：x[0]，
打开：x[1]，
close: x[2]，
高：x[3]，
低：x[4]，
vol: x[5]，
变化：x[6]
};
});
window.drawStock(数据);
}
窗户。提取库存=函数(数据){
-
定义变量
画布=文档。getelementbyid( stock-canvas )。
width=canvas.width，
高度=画布高度
CTX=画布。获取上下文(“2d”)；
控制台。log(JSON。stringify(data[0])；//{ 日期: 20150602 ,开:4844.7,关:4910.53,高:4911.57,低:4797.55,卷:62374809900,变:1.69}
ctx.clearRect(0，0，宽度，高度);
ctx.fillText(测试画布,10,10);
-
};
//加载最近30个交易日的K线图数据：
var js=文档。createelement( script )；
js。src= http://img 1。钱。126 .net/data/hs/Kline/day/history/2015/000001。JSON？callback=loadStockDatat= date。now()；
文档。getelementsbytagname( head )[0].appendChild(js)；
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。