canvas_简单练习

Posted 2020-12-25 wush-1215

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas_简单练习相关的知识，希望对你有一定的参考价值。

效果图

实现原理：

1.定义canvas标签。

2.获取canvas标签节点，创建canvas2D。

3.在canvas进行画图。

效果代码：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7     </head>
 8 
 9     <body>
10         <canvas id="canvas" width="500" height="500" style="border: 1px solid #aaa;"></canvas>
11         <script type="text/javascript">
12             var c = document.getElementById("canvas");
13             var ctx = c.getContext("2d");
14 
15             //矩形
16             ctx.fillStyle = "#008000";
17             ctx.fillRect(0, 0, 200, 200);
18 
19             //文字
20             ctx.fillStyle = "#000000";
21             ctx.font = "20px Georgia";
22             ctx.strokeText("Hello World",200,200);
23             
24             ctx.fillText("超人不会飞", 220, 220, 500);
25 
26             //圆
27             ctx.beginPath();
28             ctx.arc(100, 300, 40, 0, 2 * Math.PI);
29             ctx.stroke(); //空心圆
30             //ctx.fill();//实心圆
31 
32             //斜线
33             ctx.moveTo(0, 0);
34             ctx.lineTo(500,500);
35             ctx.stroke();
36         
37         </script>
38     </body>
39 
40 </html>

View Code

以上是关于canvas_简单练习的主要内容，如果未能解决你的问题，请参考以下文章

Canvas 练习及学习笔记

面向对象练习题

GUI的最终选择Tkinter模块练习篇

Python练习册第 0013 题：用 Python 写一个爬图片的程序，爬这个链接里的日本妹子图片 :-)，(http://tieba.baidu.com/p/2166231880)(代码片段

canvas 画一个钟表

html 5 canvas 绘制太极demo