canvas-绘制矩形-读书笔记
使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小。
要在画布上绘图，需要取得绘图上下文，也就是要调用getContext()方法并传入上下文的名字。在使用<canvas>元素前，首先要检测下getContext()方法是否存在，不是所有的版本的浏览器都支持的。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
<script type="text/javascript">
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext) {
var context = drawing.getContext("2d");
//更多代码
}
</script>
</body> </html>
toDataURL()方法，可以导出canvas元素上绘制的图像，这个方法接受一个参数，即图像的MIME类型格式，而且适合用于创建图像的任何上下文。栗如：
var drawing = document.getElementById("drawing");
//确定浏览器支持canvas元素
if(drawing.getContext){
var imgURI = drawing.toDataURL("image/png");
//显示图像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
}
2D上下文的两周基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形，描边就是只在图形的边缘画线。这两个操作结果取决于两个属性：fillStyle和strokeStyle，这两个属性的值可以是字符串、渐变对象或模式对象，默认值都是“#000000”。
矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形相关的方法包括fillRect()、strokeRect()和clearRect()。这三个方法都能接收4个参数：矩形的x坐标，矩形的y坐标，矩形宽度和矩形高度，这些参数的单位都是像素。
通过fillRect()方法绘制矩形。举栗：
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext) {
var context = drawing.getContext("2d");
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
}
通过strokeRect()方法绘制矩形。举栗：
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
var context = drawing.getContext("2d");
//绘制红色描边矩形
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 50, 50);
//绘制半透明的蓝色描边矩形
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30, 30, 50, 50);
}
参考资料
《javascript高级程序设计(第3版)》第15章 使用Canvas 绘图
canvas-绘制矩形-读书笔记的更多相关文章
- canvas绘制矩形
canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...
- h5学习-canvas绘制矩形、圆形、文字、动画
绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- canvas 绘制 矩形 圆形
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <tit ...
- canvas 绘制矩形和圆形
canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...
- canvas 绘制矩形
XXX(x,y,width,height) x矩形左上角x坐标 y矩形左上角y坐标 ...
- Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果
绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...
- html5 canvas绘制矩形和圆形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue下canvas绘制矩形
起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件moused ...
- 《DirectX 9.0 3D游戏开发编程基础》 第二章 绘制流水线 读书笔记
模型的表示 场景:物品或模型的集合 任何物品都可以用三角形网络逼近表示.我们经常用以下术语描述三角形网络:多边形(polygons).图元(primitives).网络几何单元(mesh geomet ...
随机推荐
- 转载： beta分布介绍
最近在看机器学习方面的资料,作为入门的李航教授所写的<统计机器学习>一书,刚看完第一章我也是基本处于懵了的状态,其中有一道题提到贝叶斯估计,看了下网上的资料都提到了一个叫做 beta分布的 ...
- pyCharm最新2017激活
pyCharm最新2017:下载地址 下载完成后安装软件 启动pyCharm,进入下面窗口 选择License server 在 server选项里边输入 http://elporfirio.com: ...
- 请求路径@PathVariable注释中有点.英文句号的问题（忽略英文句号后面的后缀）
前端页面请求地址 <video id=example-video width=960 height=540 class="video-js vjs-default-skin" ...
- Vscode中打开、新建内部终端快捷键方法
设置->键盘快捷方式->搜索集成终端->切换集成终端/新建集成终端 Windows 电脑 组合键 说明 Ctrl + ~ 打开默认终端 Ctrl + Shift + ~ 新建新的终端 ...
- 11-2 TCP/IP协议栈
TCP/IP协议栈 Transmission Control Protocol/Internet Protocol传输控制协议/因特网互联协议 TCP/IP是一个Protocol Stack,包括TC ...
- 【MOOC课程学习记录】数据结构
看了中国大学MOOC zju的<数据结构>2019夏的第九次开课.做了一些PTA上的习题,没有全做,因为做得慢,老是不会,加上并不能做到一有空就学习,所以做不完了,给跪了Orz. 以后有时 ...
- OpenCV.20190628
1.OpenCV提取ORB特征并匹配 - 简书.html(https://www.jianshu.com/p/420f8211d1cb) OpenCV提取ORB特征并匹配 - 简书.html(http ...
- get_object_var 返回一个数组
语法:get_object_var($object),返回一个数组.获取$object对象中的属性,组成一个数组 实例: <?php class person{ public $name=&qu ...
- GxDlms编译
目录 GxDlms编译 title: GxDlms编译 date: 2019/12/5 13:36:37 toc: true --- GxDlms编译 C++版本如果要编译动态库,项目>属性需要 ...
- sql语句 两表关联查询计算数量
select sum(a1.`num`) from `order_orderlistrow` as a1 INNER JOIN `order_orderlist` as a2 on a1.`ord ...