canvas_简单练习
效果图
实现原理:
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_简单练习的更多相关文章
- 【造轮子】打造一个简单的万能Excel读写工具
大家工作或者平时是不是经常遇到要读写一些简单格式的Excel? shit!~很蛋疼,因为之前吹牛,就搞了个这东西,还算是挺实用,和大家分享下. 厌烦了每次搞简单类型的Excel读写?不怕~来,喜欢流式 ...
- Fabio 安装和简单使用
Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- 哪种缓存效果高?开源一个简单的缓存组件j2cache
背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...
- 在Openfire上弄一个简单的推送系统
推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 使用 Nodejs 搭建简单的Web服务器
使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...
- ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面
前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
随机推荐
- VS2010中的sln,suo分别是什么含义
我们通过双击.sln加载出我们的工程. Visual Studio.NET采用两种文件类型(.sln和.suo)来存储特定于解决方案的设置,它们总称为解决方案文件.为解决方案资源管理器提供显示管理文件 ...
- java 基础--数组--004
1,数组定义格式 String[] aa; String aa[];2,二位数组的定义格式1 String aa[][] = new String[m][n]; String[] aa[] = new ...
- 分布式消息队列RocketMQ&Kafka -- 消息的“顺序消费”
在说到消息中间件的时候,我们通常都会谈到一个特性:消息的顺序消费问题.这个问题看起来很简单:Producer发送消息1, 2, 3... Consumer按1, 2, 3...顺序消费. 但实际情况却 ...
- [洛谷P1552][APIO2012]派遣
题目大意:有一棵$n$个点的树,和一个费用$m$,每个点有一个费用和价值,请选一个点,再从它的子树中选取若干个点,使得那个点的价值乘上选的点的个数最大,要求选的点费用总和小于等于$m$ 题解:树形$d ...
- 【Codeforces Round #404 (Div. 2)】题解
A. Anton and Polyhedrons 直接统计+答案就可以了. #include<cstdio> #include<cstring> #include<alg ...
- 【SPOJ】Highways(矩阵树定理)
[SPOJ]Highways(矩阵树定理) 题面 Vjudge 洛谷 题解 矩阵树定理模板题 无向图的矩阵树定理: 对于一条边\((u,v)\),给邻接矩阵上\(G[u][v],G[v][u]\)加一 ...
- 爆款PHP面试题
$a = 3; $b = 6; if ($a = 4 || $b = 4) { $a++; $b++; } echo $a; //输出 1 echo $b; //输出 7 逛鸟哥博客,看评论区有个新手 ...
- BZOJ1041 [HAOI2008]圆上的整点 【数学】
1041: [HAOI2008]圆上的整点 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 4631 Solved: 2087 [Submit][S ...
- HDOJ.2955 Robberies (01背包+概率问题)
Robberies 算法学习-–动态规划初探 题意分析 有一个小偷去抢劫银行,给出来银行的个数n,和一个概率p为能够逃跑的临界概率,接下来有n行分别是这个银行所有拥有的钱数mi和抢劫后被抓的概率pi, ...
- webpack散记
1. manifest manifest存储了webpack的chunk相关的信息.具体为一个对象,或者包含runtime的一段代码.其中包含着一个chunkId,已经对应chunkId的相关信息,例 ...