整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

Python程序开发之简单小程序实例（9）利用Canvas绘制图形和文字

ython程序开发之简单小程序实例

（9）利用Canvas绘制图形和文字

一、项目功能

利用Tkinter组件中的Canvas绘制图形和文字。

二、项目分析

要在窗体中绘制图形和文字，需先导入Tkinter组件，然后用Canvas完成绘制。

三、程序源代码

源码截图：

#!/usr/bin/python3.6

# -*- coding: GBK -*-

from tkinter import *

root = Tk()

root.title('绘制图形与字体')

# 创建画布，设置其背景色为白色

cv = Canvas(root,bg = 'white', width=500, height=300)

cv.pack(fill=BOTH, expand=YES)

# 创建一个正方形，设置填充色为蓝色

cv.create_rectangle(10,10,50,50,fill='blue')

# 创建一个圆形，设置填充色为黑色

cv.create_oval(90, 10, 140, 50,fill='green')

# 创建一个扇形

coord = 300, 10, 180, 100

# 设置扇形的起始角度为30,弧度为120，设置填充色为绿色

cv.create_arc(coord, start=30, extent=120, fill="magenta")

# 在窗体指定位置中插入自定义图片

mypic = PhotoImage(file="myball.gif")

cv.create_image(370, 35,image=mypic)

# 创建字体

columnFont = ('黑体', 15)

for i, st in enumerate(['大飞狼', '小面羊', '大美吕', '小孔容', '天屎好美']):

cv.create_text((10 + i * 100, 90),

text = st,

font = columnFont,

fill='red',

anchor = W,

justify = LEFT)

cv.pack()

root.mainloop()

top.mainloop()

四、代码解释

第一行为引用python版本，本实例为python3.6

第二行是程序编码引用，因为在程序中包含有中文字符，所以必须引用GBK，否则就会报错。

第七行至第三十三行为功能实现主体，每段代码的具体功能可在代码的注释中查看。

五、运行

1、在新窗体中绘制图形和字体

图形的前三个分别是用Canvas的create_rectangle（绘制矩形）、create_oval（绘制圆形）、create_arc（绘制弧形）实现，第四个为插入的自制GIF图片。

下一篇：《Python程序开发之简单小程序实例(10)》

更多精彩内容将在以后的章节分享给朋友们，请添加好友至收藏，欢迎点赞并关注后期内容更新！

、canvas简介

  1. canvas是HTML5提供的一种新标签,双标签;
  2. HTML5 canvas标签元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成;
  3. canvas标签只是图形容器，必须使用脚本来绘制图形;

Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画;


二、案例目标

我们今天的目标是使用HTML5画布技术制作一款拼图小游戏，要求将图像划分为3*3的9块方块并打乱排序，用户可以移动方块拼成完整图片。

效果如下所示:


三、程序流程

3.1 HTML静态页面布局

<div id="container">
            <!--页面标题-->
            <h3>HTML5画布综合项目之拼图游戏</h3>
            <!--水平线-->
            <hr />
            <!--游戏内容-->
            <!--游戏时间-->        
            <div id="timeBox">
                共计时间：<span id="time">00:00:00</span>
            </div>
            <!--游戏画布-->
            <canvas id="myCanvas" width="300" height="300" style="border:1px solid">
                对不起，您的浏览器不支持HTML5画布API。
            </canvas>
            <!--游戏按钮-->
            <div>
                <button onclick="restartGame()">
                    重新开始
                </button>
            </div>  
</div>

效果如下所示:

我们可以看到页面的大致结构是已经显现出来了,就是骨架已经搭建好了,现在我们要使用css强化样式;


3.2 CSS打造页面样式

整体背景设置

body {
    background-color: silver;/*设置页面背景颜色为银色*/
}

游戏界面样式设置

#container {
    background-color: white;
    width: 600px;   
    margin: auto;
    padding: 20px;
    text-align: center; 
    box-shadow: 10px 10px 15px black;
}

游戏时间面板样式设置

#timeBox {
    margin: 10px 0;
    font-size: 18px;
}

游戏按钮样式设置

button {
    width: 200px;
    height: 50px;
    margin: 10px 0;
    border: 0;
    outline: none;
    font-size: 25px;
    font-weight: bold;
    color: white;  
    background-color: lightcoral;
}

鼠标悬浮时的按钮样式设置

button:hover {
    background-color: coral;
}

设置好界面整体样式之后我们得到完整的界面,如下所示:

可以看到整体的静态界面已经搭建出来了


3.3 js构建交互效果

3.3.1 对象的获取以及图片的设置

目标对象的获取

var c = document.getElementById('myCanvas'); //获取画布对象
var ctx = c.getContext('2d'); //获取2D的context对象

声明拼图的图片素材来源

var img = new Image();
img.src = "image/pintu.jpg";
                
img.onload = function() { //当图片加载完毕时
    generateNum(); //打乱拼图的位置
    drawCanvas(); //在画布上绘制拼图
}

3.3.2 初始化拼图

  • 需要将素材图片分割成3行3列的9个小方块，并打乱顺序放置在画布上;
  • 为了在游戏过程中便于查找当前的区域该显示图片中的哪一个方块，首先为原图片上的9个小方块区域进行编号;


定义初始方块位置

var num = [[00, 01, 02], [10, 11, 12], [20, 21, 22]];


打乱拼图的位置

function generateNum() { //循环50次进行拼图打乱    
         for (var i = 0; i < 50; i++) {
      //随机抽取其中一个数据
            var i1 = Math.round(Math.random() * 2);
            var j1 = Math.round(Math.random() * 2);
      //再随机抽取其中一个数据
            var i2 = Math.round(Math.random() * 2);
            var j2 = Math.round(Math.random() * 2);
      //对调它们的位置
            var temp = num[i1][j1];
            num[i1][j1] = num[i2][j2];
            num[i2][j2] = temp;
   }
}


绘制拼图

自定义名称的drawCanvas()方法用于在画布上绘制乱序后的图片;

function drawCanvas() {
    //清空画布
    ctx.clearRect(0, 0, 300, 300);
    //使用双重for循环绘制3x3的拼图
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            if (num[i][j] != 22) {
                //获取数值的十位数，即第几行
                var row = parseInt(num[i][j] / 10);
                //获取数组的个位数，即第几列
                var col = num[i][j] % 10;
                //在画布的相关位置上绘图
                ctx.drawImage(img, col * w, row * w, w, w, j * w, i * w, w, w); // w:300 / 3 = 100(小图宽度)
            }
        }
    }
}

如下所示:

3.3.3 事件绑定

监听鼠标监听事件

c.onmousedown = function(e) {
    var bound = c.getBoundingClientRect(); //获取画布边界
    
    var x = e.pageX - bound.left; //获取鼠标在画布上的坐标位置(x,y)
    var y = e.pageY - bound.top;


    var row = parseInt(y / w); //将x和y换算成几行几列
    var col = parseInt(x / w);


    
    if (num[row][col] != 22) { //如果当前点击的不是空白区域
        detectBox(row, col); //移动点击的方块
        drawCanvas(); //重新绘制画布
        var isWin = checkWin(); //检查游戏是否成功
        
        if (isWin) { //如果游戏成功
            clearInterval(timer); //清除计时器
            ctx.drawImage(img, 0, 0); //绘制完整图片
            ctx.font = "bold 68px serif"; //设置字体为加粗、68号字，serif
            ctx.fillStyle = "red"; //设置填充色为红色
            ctx.fillText("游戏成功！", 20, 150); //显示提示语句
        }
    }
}

点击方块移动

function detectBox(i, j) {
    //如果点击的方块不在最上面一行
    if (i > 0) {
        //检测空白区域是否在当前方块的正上方
        if (num[i-1][j] == 22) {
            //交换空白区域与当前方块的位置
            num[i-1][j] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
    //如果点击的方块不在最下面一行
    if (i < 2) {
        //检测空白区域是否在当前方块的正下方
        if (num[i+1][j] == 22) {
            //交换空白区域与当前方块的位置
            num[i+1][j] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
    //如果点击的方块不在最左边一列
    if (j > 0) {
        //检测空白区域是否在当前方块的左边
        if (num[i][j - 1] == 22) {
            //交换空白区域与当前方块的位置
            num[i][j - 1] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
    //如果点击的方块不在最右边一列
    if (j < 2) {
        //检测空白区域是否在当前方块的右边
        if (num[i][j + 1] == 22) {
            //交换空白区域与当前方块的位置
            num[i][j + 1] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
}


3.3.4 游戏计时

  • 自定义函数getCurrentTime()用于进行游戏计时；
  • function getCurrentTime() {
    s = parseInt(s);     //将时分秒转换为整数以便进行自增或赋值
    m = parseInt(m);
    h = parseInt(h);
    s++;     //每秒变量s先自增1

    if (s == 60) {
    s = 0;     //如果秒已经达到60，则归0
    m++;     //分钟自增1
    }
    if (m == 60) {
    m = 0;     //如果分钟也达到60，则归0
    h++;     //小时自增1
    }


    //修改时分秒的显示效果，使其保持两位数
    if (s < 10)
    s = "0" + s;
    if (m < 10)
    m = "0" + m;
    if (h < 10)
    h = "0" + h;
    time.innerHTML = h + ":" + m + ":" + s;     //将当前计时的时间显示在页面上
    }
  • 在JavaScript中使用setInterval()方法每隔1秒钟调用getCurrentTime()方法一次，以实现更新效果;var timer = setInterval("getCurrentTime()", 1000);


3.3.5 游戏成功与重新开始

游戏成功判定与显示效果的实现

  • 自定义函数checkWin()用于进行游戏成功判断;
function restartGame() {
    clearInterval(timer);  //清除计时器
    s = 0; //时间清零
    m = 0;
    h = 0;
    getCurrentTime();  //重新显示时间
    timer = setInterval("getCurrentTime()", 1000);
 
    generateNum(); //重新打乱拼图顺序
    drawCanvas(); //绘制拼图
    
}
  • 如果成功则使用clearInterval()方法清除计时器。然后在画布上绘制完整图片，并使用fillText()方法绘制出“游戏成功”的文字图样;if (isWin) { //如果游戏成功
    clearInterval(timer);     //清除计时器
    ctx.drawImage(img, 0, 0);     //绘制完整图片
    ctx.font = "bold 68px serif";     //设置字体为加粗、68号字，serif
    ctx.fillStyle = "red";     //设置填充色为红色
    ctx.fillText("游戏成功！", 20, 150);     //显示提示语句
    }

3.4 最终效果演示

静态效果如上所示,至于游戏成功这里伙计们可以自行操作;


四、总结

本次案例我们使用HTML5的新特性canvas画布标签打造了简单的9宫格拼图游戏,总体来说没有特别的复杂,主要是图片的分割方块移动事件的绑定,以及重新游戏的初始化操作,明确了游戏逻辑之后其实代码的编写其实不难。感兴趣的小伙伴可以去尝试一下。

说明：

=====

1.1 Toyplot是一个Python的交互式绘图库，可用于数据可视化、绘图、文字，用各种形式展示。

1.2 为科学家和工程师们提供简洁的界面。

1.3 可开发美丽的交互式动画，以满足电子出版和支持repoducibility的独特功能。

1.4 创建最佳的数据图形"out-of-the-box"。

2 准备：

=====

2.1 官网：

https://github.com/sandialabs/toyplot
https://toyplot.readthedocs.io/en/stable/

2.2 安装：

pip install toyplot
#本机安装
sudo pip3.8 install toyplot
#推荐国内源安装
sudo pip3.8 install -i https://mirrors.aliyun.com/pypi/simple toyplot

2.3 环境：

华为笔记本电脑、深度deepin-linux操作系统、谷歌浏览器、python3.8和微软vscode编辑器。


3 折线图：

=======

3.1 本代码：为注释版

#line==折线图
import toyplot as tp

x=['1','2','3','4','5','6']

#y=[31,22,55,41,66,17]  #1组数据

y=[[31,22],[22,17],[55,34],[41,28],[66,43],[17,36]] #2组数据

canvas = tp.Canvas(width=300, height=300,) #方法一，画布大小设置
#方法二：style=类似与css设置
#canvas = tp.Canvas("6in", "6in", style={"background-color":"pink"})

#坐标轴axes的标签名
axes = canvas.cartesian(xlabel='序号',ylabel='data')
#线条颜色color设置
#mark = axes.plot(x, y,color='red')  #1组颜色设置

mark = axes.plot(x, y,color=['red','green'])  #1组颜色设置

#水平图例==horizontal-legends
markers = [mark + tp.marker.create(shape="o") for mark in mark.markers]
axes.label.text = markers[0] + "  dog  " + markers[1] + "  pig"

#浏览器自动打开,推荐这种
import toyplot.browser
tp.browser.show(canvas)

#生成pdf
#import toyplot.pdf
#tp.pdf.render(canvas, "/home/xgj/Desktop/toyplot/1-line.pdf")

#生成png图片
#import toyplot.png
#tp.png.render(canvas, "/home/xgj/Desktop/toyplot/1-line.png")

#生成html
#import toyplot.html
#tp.html.render(canvas, "/home/xgj/Desktop/toyplot/1-line.html")

'''
#生成svg图片
import toyplot.svg
svg = tp.svg.render(canvas)
svg.attrib["class"] = "MyCustomClass"
import xml.etree.ElementTree as xml
with open("/home/xgj/Desktop/toyplot/1-line.svg", "wb") as file:
    file.write(xml.tostring(svg))
'''

3.2 上述代码简洁版：

#line==折线图
import toyplot as tp
x=['1','2','3','4','5','6']
y=[[31,22],[22,17],[55,34],[41,28],[66,43],[17,36]] #2组数据
canvas = tp.Canvas(width=300, height=300,) #画布大小设置
#坐标轴axes的标签名
axes = canvas.cartesian(xlabel='序号',ylabel='data')
#线条颜色color设置
mark = axes.plot(x, y,color=['red','green'])  
#水平图例==horizontal-legends
markers = [mark + tp.marker.create(shape="o") for mark in mark.markers]
axes.label.text = markers[0] + "  dog  " + markers[1] + "  pig"
#浏览器自动打开,推荐这种
import toyplot.browser
tp.browser.show(canvas)

3.3 操作和效果图：

4 散点图：

========

4.1 代码：

import toyplot

canvas = toyplot.Canvas(width=500, height=500)
axes = canvas.cartesian()
m0 = axes.scatterplot([0, 1, 2], [0, 1, 2], size=25)
m1 = axes.text([0, 1, 2], [0, 1, 2], ["0", "55", "100"], color="red")

marks = []
for label in ["0", "55", "100"]:
    marks.append(toyplot.marker.create(
        shape="o",
        label=label,
        size=25,
    ))
m2 = axes.scatterplot([0, 1, 2], [1, 2, 3], marker=marks)
#浏览器自动打开,推荐这种
import toyplot.browser
toyplot.browser.show(canvas)

4.2 图：

5 垂直堆砌柱状图：

==============

5.1 代码：

#bars==垂直堆砌柱状图=vsbar
import toyplot as tp
x=['1','2','3','4','5','6']
#y=[31,22,55,41,66,17]  #1组数据
y=[[31,22],[22,17],[55,34],[41,28],[66,43],[17,36]] #2组数据
canvas = tp.Canvas(width=300, height=300,) #方法一，画布大小设置
#方法二：style=类似与css设置
#canvas = tp.Canvas("6in", "6in", style={"background-color":"pink"})
#坐标轴axes的标签名
axes = canvas.cartesian(xlabel='序号',ylabel='data')
#线条颜色color设置,2组颜色设置
mark = axes.bars(x, y,color=['red','green'])
#水平图例==horizontal-legends
markers = [mark + tp.marker.create(shape="o") for mark in mark.markers]
axes.label.text = markers[0] + "  dog  " + markers[1] + "  pig"
#浏览器自动打开,推荐这种
import toyplot.browser
tp.browser.show(canvas)

5.2 图：

6 颜色条：

=======

6.1 代码：

#Color Scale
import numpy
import toyplot
colormap = toyplot.color.LinearMap(toyplot.color.Palette(), domain_min=0, domain_max=8)
canvas = toyplot.Canvas(width=400, height=100)
axis = canvas.color_scale(colormap, label="Color Scale", scale="linear")
axis.axis.ticks.locator = toyplot.locator.Extended(format="{:.1f}")
#浏览器自动打开,推荐这种
import toyplot.browser
toyplot.browser.show(canvas)

6.2 图:

7 table-heperlinks:

==============

7.1 表格块状图及链接和图示文字。

7.2 代码:

#table-heperlinks
import numpy
import toyplot
canvas, table = toyplot.table(rows=4, columns=4)
table.cells.grid.hlines[...] = "single"
table.cells.grid.vlines[...] = "single"
#填充颜色
table.cells.cell[1,1].style = {"fill":"crimson"}
#可以指定链接地址
table.cells.cell[1,1].hyperlink = "http://toyplot.readthedocs.io"
table.cells.cell[2,2].style = {"fill":"seagreen"}
#可以指定链接地址
table.cells.cell[2,2].hyperlink = "http://www.sandia.gov"
table.cells.cell[3,3].style = {"fill":"royalblue"}
table.cells.cell[3,3].title = "This is a cell!"
#浏览器自动打开,推荐这种
import toyplot.browser
toyplot.browser.show(canvas)

7.3 图：

8 高级作图之动态散点图：

====================

8.1 代码：

#散点动画图
import numpy
x = numpy.random.normal(size=100)
y = numpy.random.normal(size=len(x))

import toyplot
canvas = toyplot.Canvas(300, 300)
axes = canvas.cartesian()
mark = axes.scatterplot(x, y, size=10)

for frame in canvas.frames(len(x) + 1):
    if frame.number == 0:
        for i in range(len(x)):
            frame.set_datum_style(mark, 0, i, style={"opacity":0.1})
    else:
        frame.set_datum_style(mark, 0, frame.number - 1, style={"opacity":1.0})

#保存为mp4
#toyplot.mp4.render(canvas, "/home/xgj/Desktop/toyplot/test.mp4", progress=progress)
#浏览器自动打开,推荐这种
import toyplot.browser
toyplot.browser.show(canvas)

8.2 效果图：

===自己整理并分享出来===

喜欢的人，请点赞、关注、评论、转发和收藏。


在线咨询
上一篇：html文件删除如何恢复？恢复误删html文件教程
下一篇：&lt;AppML&gt; 案例研究-HTML 模板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 曹县 鹿寨县 新兴县 金湾区 察布查尔锡伯自治县 中阳县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服