效果图

实现原理：

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. SQL Server之看懂执行计划

    在SQL Server中,选中一段SQL按Ctrl+L,就可以查看它的执行计划. 上面是一个执行计划的实例,在SQL Server中,执行计划是从右往左看的. SQL Server中,查找数据的方式有 ...

  2. window.navigator.standalone 检测iOS WebApp是否运行在全屏模式

    iOS上的Safari浏览器可以让Web应用程序全屏显示,以取得类似本地应用的显示效果.但是这需要用户把Web应用程序的图标添加到主屏幕才可以.作为开发者,为了更好的显示效果,我们可能希望自己开发的W ...

  3. springBoot按条件装配：Condition

    编码格式转换器接口 package com.boot.condition.bootconditionconfig.converter; /** * 编码格式转换器接口 */ public interf ...

  4. codeforces 981 C.Useful Decomposition

    C. Useful Decomposition time limit per test 1 second memory limit per test 256 megabytes input stand ...

  5. [洛谷P1452]Beauty Contest

    题目大意:给你$n$个点,求出其中最远点的距离 题解:求出凸包,最远点一定都在凸包上,可以对每条边求出最远的点(可以双指针),然后求出和这条边的端点的距离,更新答案 卡点:最开始对每个点求出最远点,但 ...

  6. HDU2089：不要62——题解

    http://acm.hdu.edu.cn/showproblem.php?pid=2089 Problem Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管 ...

  7. 洛谷 P3242 [HNOI2015]接水果 解题报告

    P3242 [HNOI2015]接水果 题目描述 风见幽香非常喜欢玩一个叫做 \(osu!\) 的游戏,其中她最喜欢玩的模式就是接水果.由于她已经\(DT\) \(FC\) 了\(\tt{The\ b ...

  8. python邮件服务

    文件形式的邮件 [python] view plaincopy #!/usr/bin/env python3 #coding: utf-8 import smtplib from email.mime ...

  9. Linux之初试驱动20160613

    这篇文章主要介绍一下Linux内核下的驱动结构与书写,以及介绍Linux下简单使用驱动的应用程序: 首先我们直接看使用驱动的简单应用程序: #include <sys/types.h> # ...

  10. CSS的历史与工作原理

    1. 浏览器的发展与CSS 网页浏览器主要通过HTTP协议连接网页服务器而取得网页,HTTP容许网页浏览器送交资料到网页服务器并且获取网页.目前最常用的 HTTP 是 HTTP/1.1,这个协议在RF ...