canvas教程

随想录:canvas学习

字号+ 作者:H5之家 来源:H5之家 2017-01-11 13:04 我要评论( )

不管什么编程语言,gui编程除了控件这块,一般来说都有canvas方面的内容。开发过程如果用户需要自己设计图形、图像的话,canvas肯定是少不了的。这方面C语言的开

> 脚本语言 > >

随想录:canvas学习 2017-01-08 11:11 出处:清屏网 人气: 

不管什么编程语言,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>


分享给小伙伴们:

本文标签: canvas/">canvas

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

  • 本类最热新闻

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • canvas学习之API整理笔记(二)

      canvas学习之API整理笔记(二)

      2017-01-11 14:01

    • Old Canvas Painting Action

      Old Canvas Painting Action

      2017-01-10 18:00

    • 【网盘资源】《HTML5 Canvas核心技术图形动画与游戏开发》.((美)

      【网盘资源】《HTML5 Canvas核心技术图形动画与游戏开发》.((美)

      2017-01-10 10:00

    • Canvas钟表

      Canvas钟表

      2017-01-10 09:01

    网友点评