随想录（canvas学习）_H5之家 - 中国HTML5教程资源分享第一站

不管什么编程语言，gui编程除了控件这块，一般来说都有canvas方面的内容。开发过程如果用户需要自己设计图形、图像的话，canvas肯定是少不了的。这方面C语言的开发者就比较吃亏，因为windows下面gui不太好编写。之前turbo c软件下面有个graphics库挺好用的，但是windows没有采用，所以这方面学起来要费一点波折。当然，后来有一位同学设计了 easyx ，就是保留了graphics的接口，不过用windows sdk来实现，总的来说也挺好用的，有兴趣的同学可以试试。

和c比较起来，其他的脚本语言编写gui就轻松很多，特别是有了java、python、javascript之后。只需要简单的几行代码，就可以轻松地实现。这里举几个例子，算是抛砖迎玉。有些代码是自己写的，有些代码是网上的，引用的代码如果需要署名的话，麻烦相关同学告知一声。

python canvas编写 #!/usr/bin/python from Tkinter import * master = Tk() w = Canvas(master, width=500, height=500) w.pack() id = w.create_rectangle(50,25,150,75, fill='blue') step = 0 def run(): global w global step global id step += 1 w.delete(id) id =w.create_rectangle(50+step,25+step,150+step,75+step, fill='blue') master.after(50, run) master.after(50, run) master.mainloop() java canvas编写 import java.awt.*; import java.awt.event.*; public class hello { private Frame mainFrame; private Label headerLabel; private Label statusLabel; private Panel controlPanel; public hello(){ prepareGUI(); } public static void main(String[] args){ hello awtControlDemo = new hello(); awtControlDemo.showCanvasDemo(); } private void prepareGUI(){ mainFrame = new Frame("Java AWT Examples"); mainFrame.setSize(400,400); mainFrame.setLayout(new GridLayout(3, 1)); mainFrame.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent windowEvent){ System.exit(0); } }); headerLabel = new Label(); headerLabel.setAlignment(Label.CENTER); statusLabel = new Label(); statusLabel.setAlignment(Label.CENTER); statusLabel.setSize(350,100); controlPanel = new Panel(); controlPanel.setLayout(new FlowLayout()); mainFrame.add(headerLabel); mainFrame.add(controlPanel); mainFrame.add(statusLabel); mainFrame.setVisible(true); } private void showCanvasDemo(){ headerLabel.setText("Control in action: Canvas"); controlPanel.add(new MyCanvas()); mainFrame.setVisible(true); } class MyCanvas extends Canvas { public MyCanvas () { setBackground (Color.GRAY); setSize(300, 300); } public void paint (Graphics g) { Graphics2D g2; g2 = (Graphics2D) g; g2.drawString ("It is a custom canvas area", 70, 70); } } } javascript canvas编写 <meta charset=utf-8> <title>HTML5-canvas</title> </head> <body> <canvas id="ldsun" width="500" height="200" ></canvas> <div id="ds"></div> <script type="text/javascript"> var canvas = document.getElementById('ldsun'); var p100=canvas.getContext("2d"); var width=400; var height=200; var start=0 var exp=1; p100.strokeStyle = "rgba(255,0,0,1)"; function draw(){ p100.clearRect(0,0,width,height) p100.fillStyle="blue"; p100.beginPath(); p100.arc(180,start,20,0,Math.PI*2,1); p100.closePath(); p100.fill(); start=start+exp; if(start==0 || start==height-1){ exp=exp*-1; } } </script> <input onclick="interval=setInterval(draw,5);" value="start" type="button" /> <input onclick="clearInterval(interval);" value="stop" type="button" /> </body>