html5--5-4 绘制矩形
html5--5-4 绘制矩形
学习要点
- 掌握绘制矩形的方法:strkeRect()/fillRect()
- 掌握绘制路径的 beginPath()和closePath()
矩形的绘制方法
- rect(x,y,w,h)创建一个矩形
- strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充)
- fillRect(x,y,w,h) 绘制"被填充"的矩形
- stroke() 绘制已定义的路径
Canvas的路径方法
- moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
- lineTo() 添加一个新点,(在我们的直线案例中就是定义直线的终点,但是后边继续绘制的话,它就变成中间点)
- stroke() 绘制已定义的路径
- beginPath() 用来创建新的路径
- closePath() 从当前点回到起始点的来封闭路径
绘制直线段流程:
- 在HTML5文档中添加canvas元素,并且设置的宽高和ID
- 在canvas元素中添加提示语句,让不支持canvas的浏览器能够显示友好的提示语句
- 添加script元素
- 获取画布/设置绘图绘图环境:此为固定语句,暂时记住、了解即可,后续课程还会继续讲解
- 指定线宽:lineWidth= 数值
- 指定颜色:strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
- 设定起点:moveTo(x坐标,y坐标)
- 设定终点:lineTo(x坐标,y坐标)
- 开始绘制:stroke()
绘制矩形流程:
- 在HTML5文档中添加canvas元素,并且设置的宽高和ID
- 在canvas元素中添加提示语句,让不支持canvas的浏览器能够显示友好的提示语句
- 添加script元素
- 获取画布/设置绘图绘图环境:此为固定语句,暂时记住、了解即可,后续课程还会继续讲解
- 绘制空心矩形
- 指定线宽:lineWidth= 数值
- 指定轮廓颜色:strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
- 设定矩形的基本参数:strokeRect(x,y;width,height)
- 绘制填充矩形
- 指定填充颜色:fillStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
- 设定矩形的基本参数:fillRect(x,y;width,height)
实例


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{background: #A9A9A0}
</style>
</head>
<body>
<canvas id="mycanvas" width="500px" height="300">
您的浏览器暂不支持HTML5的canvas元素!!
</canvas>
<script type="text/javascript">
//定义变量获取画布DOM
var canvas=document.getElementById("mycanvas");
//设置绘画环境为2d
var context=canvas.getContext("2d");
//设置线宽
context.lineWidth=10;
//设置颜色
context.strokeStyle="#FF0000";
//用moveto设置起点
context.moveTo(10,10);
//用lineTo设置终点
context.lineTo(100,100);
context.lineTo(100,200);
context.lineTo(200,200);
context.lineTo(300,100);
context.lineTo(10,10);
//开始画线
context.stroke(); context.beginPath();
context.lineWidth=5;
context.strokeStyle="#FFFF00";
context.rect(350,50,100,50);
context.stroke();
</script>
</body>
</html>
html5--5-4 绘制矩形的更多相关文章
- [HTML5 Canvas学习]绘制矩形
1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...
- HTML5 在canvas绘制一个矩形
笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...
- HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- html5 canvas绘制矩形和圆形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Html5 实现灯笼绘制
最近在学习Html5,就用JavaScript在Canvas试着绘制了一个灯笼,并作了简要的说明. 具体绘制思路在页面上有说明,不再赘述,代码如下: <script type="tex ...
- HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...
- Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果
绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...
- 【HTML5】Canvas绘制基础
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像
前言 好长时间没写博文了,今天偷偷懒写篇关于opencv2中鼠标响应操作的文章. 鼠标操作属于用户接口设计,以前一直使用Qt来做,但是如果只需要简单的鼠标,键盘操作,直接调用opencv库的函数也未尝 ...
随机推荐
- BT中的磁力链接(转)
注意:磁力链接不是迅雷的,而是BT网络中的一种协议. 磁力链接与种子文件 磁力链接并不是一个新概念,早在2002年,相关的标准草稿就已经制定了.但直到2012年海盗湾为规避版权问题删除了站点上的所有T ...
- [反汇编练习] 160个CrackMe之033
[反汇编练习] 160个CrackMe之033. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
- Leet Code OJ 338. Counting Bits [Difficulty: Medium]
题目: Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num calculate ...
- python 图像识别转文字
rom PIL import Image import pytesseract #上面都是导包,只需要下面这一行就能实现图片文字识别 #text=pytesseract.image_to_string ...
- PS 基础知识 .pat文件如何使用
我下了pat文件单打不开,也下了ps 匿名 回答:5 人气:7 解决时间:2009-05-25 12:48 满意答案 将你下载的pat文件放到下面文件夹内,(这是默认安装地址),重新打开Photosh ...
- 【POJ 3026】Borg Maze
id=3026">[POJ 3026]Borg Maze 一个考察队搜索alien 这个考察队能够无限切割 问搜索到全部alien所须要的总步数 即求一个无向图 包括全部的点而且总权值 ...
- hibernate的注解装配
1.多对多,(中间表不用映射) @ManyToMany @JoinTable(name = "中间表名", joinColumns = { @JoinColumn(name = & ...
- 使用Python处理CSV文件的一些代码示例
笔记:使用Python处理CSV文件的一些代码示例,来自于<Python数据分析基础>一书,有删改 # 读写CSV文件,不使用CSV模块,仅使用基础Python # 20181110 wa ...
- Mataplotlib事例操作
刚开始需要的文件是和前边的两个连载一起的
- Canvas学习笔记——动画中的三角学
示例1,跟随鼠标的键头: 需要掌握一个重要的公式,这个方法返回从 x 轴到点 (x,y) 之间的角度 Math.atan2(dy,dx); 关键代码: function Arrow() { thi ...