提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

随想录（canvas学习）

学习 Canvas 随想录
2023-09-27 14:27:11 时间

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

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

  和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>

相关文章