HTML5 Canvas ( 矩形的绘制 ) rect, strokeRect, fillRect
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
margin: auto auto;
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* canvas 绘制矩形的方法 一
* rect(矩形的左上定点横坐标, 矩形的左上定点纵坐标, 矩形的宽度, 矩形的高度)
* 该方法只是描述了 矩形的路径, 需要调用画线或者填充的方法才能起作用
*/
cxt.fillStyle = 'yellow';
cxt.rect(200, 100, 400, 300);
//cxt.stroke();
cxt.fill(); /**
* 绘制矩形的方法二
* fillRect(矩形的左上定点横坐标, 矩形的左上定点纵坐标, 矩形的宽度, 矩形的高度)
* strokeRect(矩形的左上定点横坐标, 矩形的左上定点纵坐标, 矩形的宽度, 矩形的高度)
* 这两个方法会直接绘制出图形
*/
cxt.fillStyle = 'red';
//cxt.strokeRect(400, 200, 400, 300);
cxt.fillRect(400, 200, 400, 300);
</script>
HTML5 Canvas ( 矩形的绘制 ) rect, strokeRect, fillRect的更多相关文章
- HTML5 Canvas中实现绘制一个像素宽的细线
正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...
- HTML5 Canvas ( 线段的绘制 ) beginPath, moveTo, strokeStyle, stroke
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
- Html5 Canvas一个简单的画笔例子
相比了下Qt quick的canvas和HTML5的canvas,发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多,附上一个HTML5 canvas画笔一例子 var D ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- html5 canvas绘制矩形和圆形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 canvas 笔记一（基本用法与绘制图形）
<canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...
随机推荐
- python pandas Timestamp 转为 datetime 类型
In [11]: ts = pd.Timestamp('2014-01-23 00:00:00', tz=None) In [12]: ts.to_pydatetime() Out[12]: date ...
- PDF文本框更改字体大小
在Adobe Acrobat Professional 7.0版本后里单击所插入的文本框,会出现文本框属性,此时只能改文本框的属性,不能修改文本框内的字体大小 要改字体很简单,左键选中要改的文本,按 ...
- Hive2：Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient
[root@node1 ~]# hive which: no hbase in (/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bi ...
- hasura-graphql 集成 pipelinedb 1.0.0
pipelinedb 1.0.0 已经是一个标准的pg 扩展了,同时以前的语法也有变动,但是集成进hasura-graphql 更方便了 使用docker-compose 运行 环境准备 docker ...
- linux 的dmesg命令
dmesg命令参考博客 http://www.linuxso.com/command/dmesg.html dmesg用来显示内核环缓冲区(kernel-ring buffer)内容,内核将各种消息存 ...
- FastAdmin 浏览器 JS CSS 缓存如何更新？
由于代码修改,但文件名没有修改,因为浏览器对 JS 和 CSS 是缓存的,而且由于服务器无法控制客户端的缓存. 但是可以对 JS 和 CSS 的请求加上版本号,达到更新缓存的效果.
- ThinkPHP5 控制器中怎么实现 where id = 2 or id = 3 这个查询语句？
使用 whereOr whereIn(); (来自 ★C̶r̶a̶y̶o̶n-杭州 ) 为什么不用数组啊,array('eq', array(1,2),'or') (来自 supler)
- RAC8——scan ip的理解
SCAN概念 先介绍一下什么叫SCAN,SCAN(Single Client Access Name)是Oracle从11g R2开始推出的,客户端可以通过SCAN特性负载均衡地连接到RAC数据库.S ...
- Oracle 联机重做日志文件(ONLINE LOG FILE)
--========================================= -- Oracle 联机重做日志文件(ONLINE LOG FILE) --================== ...
- 【Spring实战-3】Spring整合Hibernate、Struts
作者:ssslinppp 1. 摘要 版本: Spring4.0.4:Hibernate4.3.5:struts2.3.16: 主要介绍了如下内容: 项目结构的规划: Spring下整合Hi ...