LOFTER for ipad —— 让兴趣,更有趣

点击下载 关闭

LOFTER-网易轻博

Canvas

1664浏览    154参与
appall

win10下的tkinter模块canvas中键滚动没法用

之前用python的canvas编程测试中键滚动消息时没成功。

消息是<MouseWheel>这是网络上找到的答案。但是在win10下还是没用。

我以为代码还是有问题呢,晚上在xp下试了结果代码可以使用。

win10真是不好用啊。

之前用python的canvas编程测试中键滚动消息时没成功。

消息是<MouseWheel>这是网络上找到的答案。但是在win10下还是没用。

我以为代码还是有问题呢,晚上在xp下试了结果代码可以使用。

win10真是不好用啊。

wxzob666

toDataURL

https://blog.csdn.net/oulihong123/article/details/73927514

https://blog.csdn.net/oulihong123/article/details/73927514


wxzob666

getImageData()

http://m.imooc.com/article/79972?block_id=tuijian_wz

注意,文章中"第x行,第y列"中i的表达式有误,应为

i = y*width + x

http://m.imooc.com/article/79972?block_id=tuijian_wz

注意,文章中"第x行,第y列"中i的表达式有误,应为

i = y*width + x

wxzob666

转 canvas的drawImage方法参数详解

HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型:


1.drawImage(image, dx, dy) 

2.drawImage(image, dx, dy, dw, dh) 

3.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)


第一个参数image可以用HTMLImageElement,HTMLCanvasElement或者HTMLVideoElement作为参数。dx和dy是image...

HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型:


1.drawImage(image, dx, dy) 

2.drawImage(image, dx, dy, dw, dh) 

3.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)


第一个参数image可以用HTMLImageElement,HTMLCanvasElement或者HTMLVideoElement作为参数。dx和dy是image在canvas中定位的坐标值;dw和dh是image在canvas中即将绘制区域(相对dx和dy坐标的偏移量)的宽度和高度值;sx和sy是image所要绘制的起始位置,sw和sh是image所要绘制区域(相对image的sx和sy坐标的偏移量)的宽度和高度值。


https://blog.csdn.net/Sayesan/article/details/83413363


锡茶壶

这个编舞应该很有意思

这个编舞应该很有意思

Davidhoo
appall

Canvas滚动测试

没试过canvas的滚动功能,参照一个样例做个测试例子。

主要是设置滚动区,如果没设置的话,滚动不受限制,设置的话,

滚动区就像一个方轴在一个方孔(画布范围)内左右上下动,

到达边界就干涉停止了,这是我的认识。

滚动后按a加了根线,是为了测试一下是否原来的原点是否变动。

这个原点原来在画布左上角,随着移动原点就不再是左上角了,

感觉就像cad里一样,画布就像一个视口,图形和坐标系整体移动,

不管怎么动都不会影响图形,这只是视图的操作。

另外,用负坐标好像也没问题。

#!/usr/bin/env python

# -*- coding:gb2312 -*-


from...

没试过canvas的滚动功能,参照一个样例做个测试例子。

主要是设置滚动区,如果没设置的话,滚动不受限制,设置的话,

滚动区就像一个方轴在一个方孔(画布范围)内左右上下动,

到达边界就干涉停止了,这是我的认识。

滚动后按a加了根线,是为了测试一下是否原来的原点是否变动。

这个原点原来在画布左上角,随着移动原点就不再是左上角了,

感觉就像cad里一样,画布就像一个视口,图形和坐标系整体移动,

不管怎么动都不会影响图形,这只是视图的操作。

另外,用负坐标好像也没问题。

#!/usr/bin/env python

# -*- coding:gb2312 -*-


from tkinter import *  


class App:

def __init__(self):

self.root = Tk()

self.root.title('Canvas滚动测试...')

self.frm = Frame(self.root)

self.frm.pack()

self.cvs = Canvas(self.frm, width=800, height=600, bg='black', scrollregion=(50,50,400,300) )# 

self.cvs.grid(row=0, column=0, sticky='WESN')

self.cvs.create_rectangle(0,0,800,600, outline='green', dash=(4,4) ) # 画布范围

self.cvs.create_rectangle(50,50,400,300, outline='green', dash=(4,4) ) # 滚动区范围

self.cvs.create_line(-30,-50,300,300, fill='green')


# 用方向键翻页键控制滚动

self.cvs.bind('<Left>', lambda event: self.cvs.xview_scroll(-1,'units') )

self.cvs.bind('<Right>', lambda event: self.cvs.xview_scroll(1,'units') )

self.cvs.bind('<Up>', lambda event: self.cvs.yview_scroll(-1,'units') )

self.cvs.bind('<Down>', lambda event: self.cvs.yview_scroll(1,'units') )

self.cvs.bind('<Prior>', lambda event: self.cvs.yview_scroll(-1,'pages') )

self.cvs.bind('<Next>', lambda event: self.cvs.yview_scroll(1,'pages') )


self.cvs.bind('a', lambda event: self.cvs.create_line(0,0,400,300, fill='green') ) # a滚动后加线测试

self.cvs.bind('x', lambda event: self.cvs.xview_moveto(0.0) ) # x回归原位

self.cvs.bind('y', lambda event: self.cvs.yview_moveto(0.0) ) # y回归原位

self.cvs.bind('f', lambda event: self.cvs.config( scrollregion=(0,0,800,600) ) ) # f全部归位测试

self.cvs.bind('c', lambda event: self.cvs.config( scrollregion=() ) ) # 清滚动区

self.cvs.focus_set()


def Run(self):

self.root.mainloop()


app = App()

app.Run()


appall

查了资料发现canvas绑定键盘需要调用focus_set

昨天查了资料,看到例子里面有画布绑定键盘wasd字母做方向控制的代码。

后面再调用canvas.focus_set(),试了例子发现可以canvas绑定键盘事件。

所以想到上次绑定不成功的原因了。

做了个测试程序,测试一下键盘的向左、向右、向上、向下绑定到canvas

测试结果成功!

F:\Temp\stk_dbg>cankey.py

do_Enter

do_Motion

。。。

do_Leave

do_Left

do_Right

do_Up

do_Down

代码如下:

#!/usr/bin/env python

# -*- coding:gb2312...

昨天查了资料,看到例子里面有画布绑定键盘wasd字母做方向控制的代码。

后面再调用canvas.focus_set(),试了例子发现可以canvas绑定键盘事件。

所以想到上次绑定不成功的原因了。

做了个测试程序,测试一下键盘的向左、向右、向上、向下绑定到canvas

测试结果成功!

F:\Temp\stk_dbg>cankey.py

do_Enter

do_Motion

。。。

do_Leave

do_Left

do_Right

do_Up

do_Down

代码如下:

#!/usr/bin/env python

# -*- coding:gb2312 -*-


from tkinter import *  


class App:

def __init__(self):

self.root = Tk()

self.root.title('Canvas绑定鼠标事件键盘事件测试...')

self.cvs = Canvas(self.root, width=800, height=600, bg='black', cursor='crosshair')

self.cvs.pack() #fill=BOTH, expand=1

#self.root.resizable(0,0)

# 鼠标进入退出移动

self.cvs.bind('<Enter>', self.do_Enter)

self.cvs.bind('<Leave>', self.do_Leave)

self.cvs.bind('<Motion>', self.do_Motion)

# 按键向左向右向上向下

self.cvs.bind('<Left>', self.do_Left)

self.cvs.bind('<Right>', self.do_Right)

self.cvs.bind('<Up>', self.do_Up)

self.cvs.bind('<Down>', self.do_Down)

self.cvs.focus_set() # 这个不设置的话按键会没反应!


def do_Enter(self, event):

print('do_Enter')


def do_Leave(self, event):

print('do_Leave')


def do_Motion(self, event):

print('do_Motion')


def do_Left(self, event):

print('do_Left')


def do_Right(self, event):

print('do_Right')


def do_Up(self, event):

print('do_Up')


def do_Down(self, event):

print('do_Down')


def Run(self):

self.root.mainloop()


app = App()

app.Run()


appall

类似cad里的长十字光标

昨天试了华泰的K线,鼠标进入的时候会画一个长的十字光标,类似cad里的那种。鼠标退出时光标消失。按左方向K线往以前的移动,右方向往新的移动,上方向则放大K线,向下则缩小K线。

本来认为这个难度也不大,但是用canvas绑定鼠标进入退出的回调函数,结果怎么试都没有回应。绑到类上也是没反应。生气之下,就用窗口先试一下这些回调。结果是可以回调的,但是为什么绑定到canvas上就回调不成功呢?

在窗口里回调先画一个十字线做测试。

本想把原来的十字光标去掉,但是没试成功。


#!/usr/bin/env python

# -*- coding:gb2312 -*-


from...

昨天试了华泰的K线,鼠标进入的时候会画一个长的十字光标,类似cad里的那种。鼠标退出时光标消失。按左方向K线往以前的移动,右方向往新的移动,上方向则放大K线,向下则缩小K线。

本来认为这个难度也不大,但是用canvas绑定鼠标进入退出的回调函数,结果怎么试都没有回应。绑到类上也是没反应。生气之下,就用窗口先试一下这些回调。结果是可以回调的,但是为什么绑定到canvas上就回调不成功呢?

在窗口里回调先画一个十字线做测试。

本想把原来的十字光标去掉,但是没试成功。



#!/usr/bin/env python

# -*- coding:gb2312 -*-


from tkinter import *  


class App:

def __init__(self):

self.root = Tk()

self.root.title('十字线测试...')

self.cvs = Canvas(self.root, width=800, height=600, bg='black', cursor='crosshair')

self.cvs.pack(fill=BOTH, expand=1)

self.root.resizable(0,0)

self.root.bind('<Enter>', self.do_Enter)

self.root.bind('<Leave>', self.do_Leave)

self.root.bind('<Motion>', self.do_Enter)

self.cur_xx = None

self.cur_yy = None

self.cur_txt = None


def do_Enter(self, event):

if self.cur_xx is None:

self.cur_xx = self.cvs.create_line(0, event.y, 799, event.y, fill='green')

else:

self.cvs.coords(self.cur_xx, 0, event.y, 799, event.y)

if self.cur_yy is None:

self.cur_yy = self.cvs.create_line(event.x, 0, event.x, 599, fill='green')

else:

self.cvs.coords(self.cur_yy, event.x, 0, event.x, 599)

if self.cur_txt is None:

self.cur_txt = self.cvs.create_text(event.x, event.y, anchor=SW, text='X%d,Y%d' % (event.x,event.y), fill='green')

else:

self.cvs.coords(self.cur_txt, event.x, event.y)

self.cvs.itemconfig(self.cur_txt, text='X%d,Y%d' % (event.x,event.y) )


def do_Leave(self, event):

if self.cur_xx is not None:

self.cvs.delete(self.cur_xx)

self.cur_xx = None

if self.cur_yy is not None:

self.cvs.delete(self.cur_yy)

self.cur_yy = None

if self.cur_txt is not None:

self.cvs.delete(self.cur_txt)

self.cur_txt = None


def Run(self):

self.root.mainloop()


app = App()

app.Run()


appall

花了两天搞了个K线原型

现在是真的效率下降厉害,老是要说这周把什么什么一定要弄好,但是

结果却事与愿违,这周本来是要把at重写一下。但是打开电脑却无从下手。

这种状态持续了很长时间。。。

原来的事没弄好,就搞一个小的,把K线做个原型出来。

本来以为也不会搞出来的,但是心定下来之后,花了大半天,也算搞出来了。


尽管不算完美,但是以后可以改进。。。

kx2.py如下:

#!/usr/bin/env python

# -*- coding:gb2312 -*-


from tkinter import *  

import re


class QZ: #...

现在是真的效率下降厉害,老是要说这周把什么什么一定要弄好,但是

结果却事与愿违,这周本来是要把at重写一下。但是打开电脑却无从下手。

这种状态持续了很长时间。。。

原来的事没弄好,就搞一个小的,把K线做个原型出来。

本来以为也不会搞出来的,但是心定下来之后,花了大半天,也算搞出来了。

尽管不算完美,但是以后可以改进。。。

kx2.py如下:

#!/usr/bin/env python

# -*- coding:gb2312 -*-


from tkinter import *  

import re


class QZ: # 量柱

def __init__(self, kxt, color):

self.kxt = kxt

self.cvs = kxt.cvs

self.color = color

self.qz = None # Q柱


def create_qz(self, td, qty):

self.td = td


tmp, y0 = self.kxt.zxj2zsj(td, 0)

tmp, self.qz = self.kxt.zxj2zsj(td, qty)

if qty > 0:

self.qz = self.cvs.create_line(self.td, y0, self.td, self.qz, fill=self.color, width=9)

else:

tmp,y1 = self.kxt.zxj2zsj(td, 1)

self.qz = self.cvs.create_line(self.td, y0, self.td, y1, fill=self.color, width=9)


class KX: # K线

def __init__(self, kxt):

self.kxt = kxt

self.cvs = kxt.cvs

self.kx = None # K线

self.kz = None # K柱


def create_kx(self, td,jk,js,zg,zd):

self.td = td

tmp, self.jk = self.kxt.zxj2zsj(td, jk)

tmp, self.js = self.kxt.zxj2zsj(td, js)

tmp, self.zg = self.kxt.zxj2zsj(td, zg)

tmp, self.zd = self.kxt.zxj2zsj(td, zd)


if js > jk:

color = 'red'

elif js < jk:

color = 'green'

else:

color = 'gray'


self.color = color

if zg>zd:

self.kx = self.cvs.create_line(self.td, self.zd, self.td, self.zg, fill=color, width=1)

elif zg==zd:

tx,ty = self.kxt.zxj2zsj(td, zg+1)

self.kx = self.cvs.create_line(self.td, self.zd, self.td, ty, fill=color, width=1)

else:

pass

if js!=jk:

self.kz = self.cvs.create_line(self.td, self.jk, self.td, self.js, fill=color, width=9)

else:

tx,ty = self.kxt.zxj2zsj(td, js+1)

self.kz = self.cvs.create_line(self.td, self.jk, self.td, ty, fill=color, width=9)



class KXT: # K线图

def __init__(self, root, width=800, height=600):

self.cvs = Canvas(root, width=width, height=height, bg='black')  

self.cvs.pack(fill=BOTH, expand=1)

self.width = width

self.height = height

self.ox = 0

self.oy = self.height-1

self.x_min = 0

self.x_max = self.width-1

self.y_min = 0

self.y_max = self.height-1

self.kx_kd = 9 # K线宽度

self.kx_jj = 13 # K线间距

self.kx_max = int(self.width/self.kx_jj-1)

self.kx_list = []

self.qz_list = []

self.kx_offset = 0

self.kx_count = 30

self.kx_data = []


def clearall(self):

self.cvs.delete(ALL)

self.kx_data = []

self.kx_list = []


def setdata(self, data):

self.kx_data = data


def setprate(self, maxy, maxprice):

self.rate = maxy/maxprice


def p2y(self, price):

return int(self.rate*price)


def setqrate(self, maxy, maxqty):

self.qrate = maxy/maxqty


def q2y(self, qty):

return int(self.qrate*qty)


def drawall(self):

kd = self.kx_data

n = len(kd)

if n > self.kx_max: n=self.kx_max

for i in range(n):

k = KX(self)

k.create_kx(10+i*self.kx_jj, self.p2y(kd[i][1]), self.p2y(kd[i][2]), self.p2y(kd[i][3]), self.p2y(kd[i][4]) )

self.kx_list.append(k)

q = QZ(self, k.color)

q.create_qz(10+i*self.kx_jj, self.q2y(kd[i][5]) )

self.qz_list.append(q)


def zsj2zxj(self, zsj_px, zsj_py): # 左上角坐标系点的坐标转化成左下角坐标系点的坐标

px, py = zsj_px, self.height-1-zsj_py

return px,py


def zxj2zsj(self, zxj_px, zxj_py): # 左下角坐标系点的坐标转化成左上角坐标系点的坐标

px, py = zxj_px, self.height-1-zxj_py

return px,py


def getdata():

"""

171221 8.16 8.20 8.26 8.15 10763

171222 8.20 8.19 8.31 8.16 9672

171225 8.16 8.19 8.22 8.13 11088

"""

f=open('kx2.txt', 'r')

s=f.read()

f.close()

ss = re.findall(r'\d{6} [\d\.]+ [\d\.]+ [\d\.]+ [\d\.]+ [\d]+',s)

ds=[]

for s in ss:

tmp=[]

ts=s.split(' ')

tmp.append(ts[0])

for i in range(1,6):

tmp.append( float(ts[i]) )

ds.append(tmp)

return ds


ds = getdata()

root = Tk()

root.title('K线Q柱测试...')

mykx = KXT(root, 600, 300)

mykx.setdata(ds)

mykx.setprate(300, 9.00)

mykx.setqrate(50, 100000.00)

mykx.drawall()

mainloop()




电子杂志制作 WWW.YAZINE.COM

CreateJS知识点滴

  • 按钮上禁止手型显示

this.but_bg.cursor ="default";

  • 按钮上禁止手型显示

this.but_bg.cursor ="default";

镜片

2018接下来就要拜托你啦!要对我点哦!谢谢你!
也希望我家的两个大宝贝!也好好的!

2018接下来就要拜托你啦!要对我点哦!谢谢你!
也希望我家的两个大宝贝!也好好的!

宇宙人

难得能入我法耳的电音,确实很好听,搭配歌词食用风味更佳。

难得能入我法耳的电音,确实很好听,搭配歌词食用风味更佳。

Daisy

知乎登录背景动画效果

摘自:https://www.zhihu.com/question/38407085


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>body{text-align: center;background: #F7FAFC;...

摘自:https://www.zhihu.com/question/38407085


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>body{text-align: center;background: #F7FAFC;overflow: hidden;background: #fff;}#canvas{display: inline-block;}</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//定义画布宽高和生成点的个数
var WIDTH = window.innerWidth, HEIGHT = window.innerHeight, POINT = 28;

var canvas = document.getElementById('canvas');
canvas.width = WIDTH,
canvas.height = HEIGHT;
var context = canvas.getContext('2d');
context.strokeStyle = 'rgba(0,0,0,0.02)',
context.strokeWidth = 1,
context.fillStyle = 'rgba(0,0,0,0.05)';
var circleArr = [];

//线条:开始xy坐标,结束xy坐标,线条透明度
function Line (x, y, _x, _y, o) {
this.beginX = x,
this.beginY = y,
this.closeX = _x,
this.closeY = _y,
this.o = o;
}
//点:圆心xy坐标,半径,每帧移动xy的距离
function Circle (x, y, r, moveX, moveY) {
this.x = x,
this.y = y,
this.r = r,
this.moveX = moveX,
this.moveY = moveY;
}
//生成max和min之间的随机数
function num (max, _min) {
var min = arguments[1] || 0;
return Math.floor(Math.random()*(max-min+1)+min);
}
// 绘制原点
function drawCricle (cxt, x, y, r, moveX, moveY) {
var circle = new Circle(x, y, r, moveX, moveY)
        cxt.beginPath()
        cxt.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI)
        cxt.closePath()
        cxt.fill();
return circle;
}
//绘制线条
function drawLine (cxt, x, y, _x, _y, o) {
var line = new Line(x, y, _x, _y, o)
        cxt.beginPath()
        cxt.strokeStyle = 'rgba(0,0,0,'+ o +')'
cxt.moveTo(line.beginX, line.beginY)
        cxt.lineTo(line.closeX, line.closeY)
        cxt.closePath()
        cxt.stroke();

}
//初始化生成原点
function init () {
        circleArr = [];
for (var i = 0; i < POINT; i++) {
            circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10)/40, num(10, -10)/40));
}
draw();
}

//每帧绘制
function draw () {
        context.clearRect(0,0,canvas.width, canvas.height);
for (var i = 0; i < POINT; i++) {
drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r);
}
for (var i = 0; i < POINT; i++) {
for (var j = 0; j < POINT; j++) {
if (i + j < POINT) {
var A = Math.abs(circleArr[i+j].x - circleArr[i].x),
B = Math.abs(circleArr[i+j].y - circleArr[i].y);
var lineLength = Math.sqrt(A*A + B*B);
var C = 1/lineLength*7-0.009;
var lineOpacity = C > 0.03 ? 0.03 : C;
if (lineOpacity > 0) {
drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i+j].x, circleArr[i+j].y, lineOpacity);
}
                }
            }
        }
    }

//调用执行
window.onload = function () {
init();
setInterval(function () {
for (var i = 0; i < POINT; i++) {
var cir = circleArr[i];
cir.x += cir.moveX;
cir.y += cir.moveY;
if (cir.x > WIDTH) cir.x = 0;
else if (cir.x < 0) cir.x = WIDTH;
if (cir.y > HEIGHT) cir.y = 0;
else if (cir.y < 0) cir.y = HEIGHT;

}
draw();
}, 16);
}

</script>
</body>
</html>

清梦

JavaScript——SVG & canvas 区别

参考:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp


SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。


Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas...

参考:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp


SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。


Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。


canvas 与 SVG 之间的一些不同之处。

Canvas 

  • 依赖分辨率

  • 不支持事件处理器

  • 弱的文本渲染能力

  • 能够以 .png 或 .jpg 格式保存结果图像

  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG 

  • 不依赖分辨率

  • 支持事件处理器

  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)

  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快

  • 不适合游戏应用


代码

玩转html5 的 canvas画图

转自:http://www.uml.org.cn/html/201208224.asp


前言

<canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。

温馨提示:以下所有实验请使用最新版的opera

基本知识

context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法是

var context...

转自:http://www.uml.org.cn/html/201208224.asp


前言

<canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。

温馨提示:以下所有实验请使用最新版的opera

基本知识

context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法是

var context =canvas.getContext("2d");

也许这个2d勾起了大家的无限遐想,但是很遗憾的告诉你html5还只是个少女,不提供3d服务。

canvas元素绘制图像的时候有两种方法,分别是

context.fill()//填充

context.stroke()//绘制边框

style:在进行图形绘制前,要设置好绘图的样式

context.fillStyle//填充的样式

context.strokeStyle//边框样式

context.lineWidth//图形边框宽度

颜色的表示方式:

直接用颜色名称:"red" "green" "blue"

十六进制颜色值: "#EEEEFF"

rgb(1-255,1-255,1-255)

rgba(1-255,1-255,1-255,透明度)

和GDI是如此的相像,所以用过GDI的朋友应该很快就能上手

绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)

x:矩形起点横坐标(坐标原点为canvas的左上角,当然确切的来说是原始原点,后面写到变形的时候你就懂了,现在暂时不用关系)

y:矩形起点纵坐标

width:矩形长度

height:矩形高度

清除矩形区域 context.clearRect(x,y,width,height)

x:清除矩形起点横坐标

y:清除矩形起点纵坐标

width:清除矩形长度

height:清除矩形高度

圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

x:圆心的x坐标

y:圆心的y坐标

straAngle:开始角度

endAngle:结束角度

anticlockwise:是否逆时针(true)为逆时针,(false)为顺时针

ps:经过试验证明书本上ture是顺时针,false是逆时针是错误的,而且无论是逆时针还是顺时针,角度都沿着顺时针扩大,如下图:

一不小心画了小日本的国旗...赶紧调下颜色和大小,绿色倒是挺合适的~

路径 context.beginPath() context.closePath()

细心的朋友会发现上面的画圆并不单单是直接用arc还用到了context的 beginPath 和closePath方法,参考书不愧是参考书,例子给得太简单了,实话说一开始我凌乱了,耐心下来做了几个实验才舒缓蛋疼的心情

实验代码如下,通过分别注释closePath 和beginPath看fill stoke 和fill stroke结合下画出来的两个1/4弧线达到实验效果

实验结果如下:

得出的结论有:*号为重点

1、系统默认在绘制第一个路径的开始点为beginPath

*2、如果画完前面的路径没有重新指定beginPath,那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制

3、每次调用context.fill()的时候会自动把当次绘制的路径的开始点和结束点相连,接着填充封闭的部分

ps:书本的结论是 如果没有closePath那么前面的路劲会保留,实验证明正确的结论是 如果没有重新beginPath那么前面的路劲会保留

ps1:如果你真心凌乱了,那么记住每次画路径都在前后加context.beginPath() 和context.closePath()就行

绘制线段 context.moveTo(x,y) context.lineTo(x,y)

x:x坐标

y:y坐标

每次画线都从moveTo的点到lineTo的点,

如果没有moveTo那么第一次lineTo的效果和moveTo一样,

每次lineTo后如果没有moveTo,那么下次lineTo的开始点为前一次lineTo的结束点

下面给出书本的例子,一朵绿色的菊花,涉及数学,不多解析,有兴趣的自己研究

绘制贝塞尔曲线(贝济埃、bezier) context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

cp1x:第一个控制点x坐标

cp1y:第一个控制点y坐标

cp2x:第二个控制点x坐标

cp2y:第二个控制点y坐标

x:终点x坐标

y:终点y坐标

qcpx:二次样条曲线控制点x坐标

qcpy:二次样条曲线控制点y坐标

qx:二次样条曲线终点x坐标

qy:二次样条曲线终点y坐标

下面给出书本的例子,一朵扭曲的绿色菊花...编书这哥们对菊花情有独钟啊- -

线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)

线性渐变颜色lg.addColorStop(offset,color)

xstart:渐变开始点x坐标

ystart:渐变开始点y坐标

xEnd:渐变结束点x坐标

yEnd:渐变结束点y坐标

offset:设定的颜色离渐变结束点的偏移量(0~1)

color:绘制时要使用的颜色

给出书本偏移量的解析图,从图可以看出线性渐变可以是两种以上颜色的渐变

径向渐变(发散)var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

径向渐变(发散)颜色rg.addColorStop(offset,color)

xStart:发散开始圆心x坐标

yStart:发散开始圆心y坐标

radiusStart:发散开始圆的半径

xEnd:发散结束圆心的x坐标

yEnd:发散结束圆心的y坐标

radiusEnd:发散结束圆的半径

offset:设定的颜色离渐变结束点的偏移量(0~1)

color:绘制时要使用的颜色

书本并没有给出发散偏移量的图,特地画了幅:

下面给出两个实验

图形变形

1、平移context.translate(x,y)

x:坐标原点向x轴方向平移x

y:坐标原点向y轴方向平移y

2、缩放context.scale(x,y)

x:x坐标轴按x比例缩放

y:y坐标轴按y比例缩放

3、旋转context.rotate(angle)

angle:坐标轴旋转x角度(角度变化模型和画圆的模型一样)

由于(平移,缩放,旋转)和(平移,旋转,缩放)一样

(缩放,选装,平移)和(旋转,缩放,平移)一样

所以实验结果只能看到“4”中情况,其实是有两种情况被覆盖了

下面给出平移,缩放,旋转先后顺序不同,坐标轴的变化图

矩阵变换 context.transform(m11,m12,m21,m22,dx,dy)

所谓的矩阵变换其实是context内实现平移,缩放,旋转的一种机制

他的主要原理就是矩阵相乘

额,要讲解这个可以另开一个篇幅,庆幸的是已经有人做了总结,可以参考下面这篇文章

http://hi.baidu.com/100912bb_bb/item/90c4a7489518b0fa1281daf1

我们需要了解的是

context.translate(x,y) 等同于context.transform (1,0,0,1,x,y)或context.transform(0,1,1,0.x,y)

context.scale(x,y)等同于context.transform(x,0,0,y,0,0)或context.transform (0,y,x,0, 0,0);

context.rotate(θ)等同于 context.transform(Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180), -Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),0,0) 或 context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180), Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180), 0,0)

图形组合 context.globalCompositeOperation=type

图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢,还是相互重叠的部分不显示等等,至于怎么显示就取决于type的值了

type:

source-over(默认值):在原有图形上绘制新图形

destination-over:在原有图形下绘制新图形

source-in:显示原有图形和新图形的交集,新图形在上,所以颜色为新图形的颜色

destination-in:显示原有图形和新图形的交集,原有图形在上,所以颜色为原有图形的颜色

source-out:只显示新图形非交集部分

destination-out:只显示原有图形非交集部分

source-atop:显示原有图形和交集部分,新图形在上,所以交集部分的颜色为新图形的颜色

destination-atop:显示新图形和交集部分,新图形在下,所以交集部分的颜色为原有图形的颜色

lighter:原有图形和新图形都显示,交集部分做颜色叠加

xor:重叠飞部分不现实

copy:只显示新图形

文字看得人眼花缭乱,特意画图一张:回头一看惊觉打错字,图片的原型为圆形,你懂的- -

以下为实验代码

结果是动态的切换各种组合

给图形绘制阴影

context.shadowOffsetX :阴影的横向位移量(默认值为0)

context.shadowOffsetY :阴影的纵向位移量(默认值为0)

context.shadowColor :阴影的颜色

context.shadowBlur :阴影的模糊范围(值越大越模糊)

先来个简单的例子

再来个书本上的五角星的例子

绘制图像

绘图:context.drawImage

图像平铺:context.createPattern(image,type)

图像裁剪:context.clip()

像素处理:var imagedata=context.getImageData(sx,sy,sw,sh)

绘图 context.drawImage

context.drawImage(image,x,y)

image:Image对象var img=new Image(); img.src="url(...)";

x:绘制图像的x坐标

y:绘制图像的y坐标

context.drawImage(image,x,y,w,h)

image:Image对象var img=new Image(); img.src="url(...)";

x:绘制图像的x坐标

y:绘制图像的y坐标

w:绘制图像的宽度

h:绘制图像的高度

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制

image:Image对象var img=new Image(); img.src="url(...)";

sx:图像上的x坐标

sy:图像上的y坐标

sw:矩形区域的宽度

sh:矩形区域的高度

dx:画在canvas的x坐标

dy:画在canvas的y坐标

dw:画出来的宽度

dh:画出来的高度

最后一个方法可能比较拗,还是上图吧

三个方法的运行结果如下:

图像平铺 context.createPattern(image,type)

type:

no-repeat:不平铺

repeat-x:横方向平铺

repeat-y:纵方向平铺

repeat:全方向平铺

类似图形组合,给出动态的切换平铺类型代码

图像裁剪:context.clip()

context.clip()只绘制封闭路径区域内的图像,不绘制路径外部图像,用的时候

先创建裁剪区域

再绘制图像(之后绘制的图形都会采用这个裁剪区域,要取消这个裁剪区域就需要用到保存恢复状态,下面有讲)

给出圆形和星形的裁剪代码

像素处理:

获取像素颜色数组: var imagedata=context.getImageData(sx,sy,sw,sh)

sx:cavas的x轴坐标点

sy:canvas的y轴坐标点

sw:距离x的宽度

sh:距离y的高度

可以利用context.getImageData返回的一个像素颜色数组,顺序是所取像素范围的从左到右,从上到下,数组的元素是(所有图形,包括图片,和绘制的图形)每个像素的rgba

[r1,g1,b1,a1,r2,g2,b2,a2...]

设置像素颜色:context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

对imagedata数组中的各个像素的r、g、b、a值进行修改,再调用putImageData方法进行绘制

imagedata:修改后的imagedata

dx:重绘图像的起点横坐标(重绘的起点和原来的图像一致的话就会把原来的图形覆盖掉,看起来就像是原来的图像变成现在的图像一样)

dy:重绘图像的起点纵坐标

//以下可选参数,设置重绘的矩形范围,如果缺省,默认会重绘所有的imegedata

dirtyX:矩形左上角x轴坐标

dirtyY:矩形左上角y轴坐标

dirtyWidth:矩形长度

dirtyHeight:矩形高度

绘制文字

填充文字:context.fillText(text,x,y)

绘制文字轮廓 context.strokeText(text,x,y)

text:要绘制的文字

x:文字起点的x坐标轴

y:文字起点的y坐标轴

context.font:设置字体样式

context.textAlign:水平对齐方式

start、end、right、center

context.textBaseline:垂直对齐方式

top、hanging、middle、alphabetic、ideographic、bottom

var length=context.measureText(text):计算字体长度(px)那么能不能计算高度啊,很遗憾,不能

保存和恢复状态

保存:context.save()

恢复:context.restore()

在上面的裁剪图片提过,一旦设定了裁剪区域,后来绘制的图形都只显示裁剪区域内的内容,要“取消”这个裁剪区域才能正常绘制其他图形,其实这个“取消”是利用save()方法和restore()方法来实现的。

context.save():调用该方法,会保存当前context的状态、属性(把他理解成游戏存档)

context.restore():调用该方法就能恢复到save时候context的状态、属性(游戏回档)

保存文件 canvas.toDataURL(MIME)

在canvas中绘出的图片只是canvas标签而已,并非是真正的图片,是不能右键,另存为的,我们可以利用canvas.toDataURL()这个方法把canvas绘制的图形生成一幅图片,生成图片后,就能对图片进行相应的操作了。

结合setInterval制作动画

基本原理就是定时清除整个canvas重新绘制,下面给出“我弹、我弹、我弹弹弹”的代码 (额、名字而已)

小矩形在矩形区域移动,碰到矩形区域的边缘反弹

结语

历时一天半,本来以为可以玩转的,写下来才发现要玩转canvas还需要很多的实践,这个道理应该是适用所有的技术的,做人啊,就得谦虚点。本文如有错误,请及时留言给我纠正,希望能给正在学canvas绘图的童鞋有所帮助


玲珑花

javascript简单的粒子喷射效果源码canvas

<!DOCTYPE HTML>

 <html lang="en">

  <meta charset="utf-8">

  <head><title>Draw a Circle</title>

   <style type="text/css">

    body {

      background...

<!DOCTYPE HTML>

 <html lang="en">

  <meta charset="utf-8">

  <head><title>Draw a Circle</title>

   <style type="text/css">

    body {

      background-color: #000000;

      margin: 0px;

      overflow: hidden;

    }

   </style>

  </head>

 <body>

</body>

<script>

varcanvas = document.createElement( 'canvas' ),

context = canvas.getContext( '2d' );

var canvasWidth = window.innerWidth; 

canvasHeight = window.innerHeight;

 

 //初始化一个数组 保存例子

var particles = [];

var flag;

  init();


function init() { 

  document.body.appendChild(canvas); 

  canvas.width = canvasWidth;

  canvas.height = canvasHeight;

  flag=setInterval(loop, 30);

  }


function loop(){ //重点是这个方法了。

  // 清除canvas中的内容 

  context.fillStyle = "rgba(0,0,0,1)";

  context.fillRect(0,0, canvasWidth, canvasHeight);


   //随机产生一个粒子

   //var particle = new Particle(Math.random()*canvasWidth, 30);

   var particle = new Particle(canvasWidth*.5, canvasHeight*.5);

   

    particle.xVel = Math.random()*4-2;//注意这里啦,给粒子一个水平位置变化量 随机的水平位置变化量

   particles.push(particle); //加入数组

   

console.info(particles);//测试数组的值 如何保存?

   // 绘制数组中的每一个粒子

   for (i=0; i<particles.length; i++) {

     var particle = particles[i]; 

     particle.render(context); 

 

 //// 更新数组中的每一个粒子的 y 坐标

     particle.update(); 

  }

  

  if (particles.length>200){//只保留20个粒子

     particles.shift();

    }


 }


   //粒子类

  function Particle (xPos, yPos) { 

    this.xPos = xPos;//中心X坐标

    this.yPos = yPos; //中心Y坐标

//加入纵向位置娈化量

//this.yVel = 5;

this.yVel = -5;//负值,所以粒子向上运动

this.xVel = 0;

this.counter = 0;//影响颜色

//增加重力影响

this.gravity = 0.1;

 

this.render = function(c){

  // set the color of the fill

  //c.fillStyle = "rgba(255, 255, 255, .5)";

   c.fillStyle = "hsl("+this.counter+", 100%, 50%)";//注意这里啦

  // draw a circle of the required size

  c.beginPath();

  c.arc(this.xPos, this.yPos, 5, 0, Math.PI*2, true);

  // and fill it

  c.fill(); 

   }

   this.update = function(){ //更新自己的方法

 //this.yPos += this.yVel;

this.yVel += this.gravity;

this.yPos += this.yVel;

this.xPos += this.xVel;

this.counter +=5;//加一点点  变颜色

  }

  }


</script>



</html>


LOFTER

让兴趣,更有趣

简单随性的记录
丰富多彩的内容
让生活更加充实

下载移动端
关注最新消息