随想录(canvas学习)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】

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

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

1. 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()

2. 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);
      }
   }
}

3. 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> 
相关文章
相关标签/搜索