效果图

实现原理：

1.定义canvas标签。

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

3.在canvas进行画图。

效果代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <canvas id="canvas" width="500" height="500" style="border: 1px solid #aaa;"></canvas>

         <script type="text/javascript">

             var c = document.getElementById("canvas");

             var ctx = c.getContext("2d");

             //矩形

             ctx.fillStyle = "#008000";

             ctx.fillRect(0, 0, 200, 200);

             //文字

             ctx.fillStyle = "#000000";

             ctx.font = "20px Georgia";

             ctx.strokeText("Hello World",200,200);

             ctx.fillText("超人不会飞", 220, 220, 500);

             //圆

             ctx.beginPath();

             ctx.arc(100, 300, 40, 0, 2 * Math.PI);

             ctx.stroke(); //空心圆

             //ctx.fill();//实心圆

             //斜线

             ctx.moveTo(0, 0);

             ctx.lineTo(500,500);

             ctx.stroke();

         </script>

     </body>

 </html>

canvas_简单练习的更多相关文章

  1. 【造轮子】打造一个简单的万能Excel读写工具

    大家工作或者平时是不是经常遇到要读写一些简单格式的Excel? shit!~很蛋疼,因为之前吹牛,就搞了个这东西,还算是挺实用,和大家分享下. 厌烦了每次搞简单类型的Excel读写?不怕~来,喜欢流式 ...

  2. Fabio 安装和简单使用

    Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...

  3. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  4. 哪种缓存效果高？开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  5. 在Openfire上弄一个简单的推送系统

    推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...

  6. 我的MYSQL学习心得（一） 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  7. 使用 Nodejs 搭建简单的Web服务器

    使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...

  8. ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  9. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

随机推荐

  1. java-实用的sql语句

    一.在数据库创建表格的SQL语句 1,创建一个link表格,包含属性:lid  主键,title 标题,  imgpath 图片地址 , url  网址  , info 说明,  isshow 显示1 ...

  2. jQuery实现三级联动

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 第64天：CSS常用命名规范，有用！

    CSS常用命名,必须记住 一.常用命名 标题:title 摘要:summary 箭头:arrow 商标:label 网站标志:logo 转角/圆角:corner 横幅广告:banner 子菜单:sub ...

  4. asp.net mvc4 使用分部视图来刷新数据库

    前几天研究SSE,用浏览器做侦听后台数据库数据变化,如果有更新,就即时通过浏览器,使用SSE效果果然OK,侦听数据库有更新时马上会向浏览器通知有新数据,我还在浏览器里放了短音提示,但遇到一个问题,发出 ...

  5. poj3164-Command Network

    给出平面上一些点,和连接它们的带权有向边,求把所有点连起来的最小总权值. 分析 由于这里边是有向的(unidirectional),所以这是经典的最小树形图问题,可以说是最小树形图的模板题. 代码 这 ...

  6. 2011 Multi-University Training Contest 7 - Host by ECNU

    AC: F I. rank 40/88. 开场看了F发现是个简单的DP,随便写了一下WA,,,发现把样例倒着输就过不了了...原来是忘了最后的时候开始上课的话可能上不了多久... 想到一个简洁的状态方 ...

  7. SocketServer-实现并发处理3

    用socketserver创建一个服务的步骤: 1  创建一个request handler class(请求处理类),合理选择StreamRequestHandler和DatagramRequest ...

  8. 转：Conjugate prior-共轭先验的解释

    Conjugate prior-共轭先验的解释    原文:http://blog.csdn.net/polly_yang/article/details/8250161 一 问题来源: 看PRML第 ...

  9. 【原创】U盘插入磁盘显示脱机解决

    问题说明:插入U盘,电脑可识别硬件,打开我的电脑,无显示U盘所在的磁盘.,并且在计算机管理的磁盘管理看到的U盘为脱机状态 解决方案:1.打开命令,输入 diskpart  回车,输入list disk ...

  10. 【题解】Uoj79一般图最大匹配

    带花树裸题,感觉带花树强强……不会的勿看此文,解释的可能不对,只是给自己看的!!!如题,带花树即为求一般图最大匹配算法(匈牙利与dinic为二分图最大匹配).推荐论文:2015年<浅谈图的匹配算 ...