###canvas绘制矩形
HTML中的元素canvas只支持一种原生的图形绘制:矩形。所有其他的图形的绘制都至少需要生成一条路径

1.绘制矩形
canvas提供了三种方法绘制矩形:
---->绘制一个填充的矩形(填充色默认为黑色)
fillRect(x, y, width, height)
---->绘制一个矩形的边框(默认边框为:一像素实心黑色)
strokeRect(x, y, width, height)
---->清除指定矩形区域,让清除部分完全透明。
clearRect(x, y, width, height)

x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。
width和height设置矩形的尺寸。(存在边框的话,边框会在width上占据一个边框的宽度,height同理)

2.strokeRect时,边框像素渲染问题
按理渲染出的边框应该是1px的,
canvas在渲染矩形边框时,边框宽度是平均分在偏移位置的两侧。
context.strokeRect(10,10,50,50)
:边框会渲染在10.5 和 9.5之间,浏览器是不会让一个像素只用自己的一半的
相当于边框会渲染在9到11之间
context.strokeRect(10.5,10.5,50,50)
:边框会渲染在10到11之间

3.添加样式和颜色
fillStyle :设置图形的填充颜色。

strokeStyle :设置图形轮廓的颜色。
默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000)
lineWidth : 这个属性设置当前绘线的粗细。属性值必须为正数。
描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。
默认值是1.0。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> html,body{
height: %;
overflow: hidden; }
body{
background: greenyellow;
}
#test{
position: absolute;
top: ;
left: ;
right: ;
bottom:;
margin: auto;
background: gray; }
</style>
</head>
<body>
<canvas id="test" width="" height="">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>
</body>
<script type="text/javascript">
window.onload=function(){ var canvas = document.querySelector("#test"); if(canvas.getContext){ var ctx=canvas.getContext("2d"); //设置图形的填充颜色
ctx.fillStyle = "blue";
//实心矩形
ctx.fillRect(,,,)
//设置图形轮廓的颜色
ctx.strokeStyle = "blue";
//带边框的矩形
// 100 : 99.5 --- 100.5(99-101)
// 100.5: 100 --- 101
ctx.strokeRect(100.5,100.5,,) // 清除指定矩形区域,让清除部分完全透明
// ctx.clearRect(50,50,100,100) }
} </script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
html,body{
height: %;
overflow: hidden;
}
body{
background: pink;
}
#test{
background: gray;
position: absolute;
left: ;
top: ;
right: ;
bottom: ;
margin: auto;
}
</style>
</head>
<body>
<canvas id="test" width="" height="">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>
</body>
<script type="text/javascript">
window.onload=function(){
//querySelector身上有坑
//拿到画布
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
// 设置图形轮廓的颜色。
ctx.strokeStyle="pink";
// 设置图形的填充颜色。
ctx.fillStyle="green";
// 覆盖渲染
ctx.lineWidth=; ctx.moveTo(,);
ctx.lineTo(,);
ctx.lineTo(,);
ctx.lineTo(,); // ctx.moveTo(200,200);
ctx.lineTo(,);
ctx.lineTo(,);
//描边的线
ctx.stroke(); }
} </script>
</html>

4.lineWidth & 覆盖渲染

<script type="text/javascript">
window.onload=function(){
//querySelector身上有坑
//拿到画布
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
// 设置图形轮廓的颜色。
ctx.strokeStyle="pink";
// 设置图形的填充颜色。
ctx.fillStyle="green";
// 覆盖渲染
ctx.lineWidth=; ctx.moveTo(,);
ctx.lineTo(,);
ctx.lineTo(,);
ctx.lineTo(,); // ctx.moveTo(200,200);
ctx.lineTo(,);
ctx.lineTo(,);
//描边的线
ctx.stroke(); }
} </script>

5.lineJoin
设定线条与线条间接合处的样式(默认是 miter)
round : 圆角
bevel : 斜角
miter : 直角

canvas绘制线和矩形的更多相关文章

  1. WPF使用Canvas绘制可变矩形

    1.问题以及解决办法 最近因为项目需要,需要实现一个位置校对的功能,大致的需求如下:有一个图片,有一些位置信息,但是位置信息可能和实际有些偏差,需要做简单调整,后面会对这张图片进行切割等,做些处理.( ...

  2. Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  3. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  4. 使用canvas绘制渐变色矩形和使用按键控制人物移动

    使用canvas绘制渐变色矩形和使用按键控制人物移动 1.使用canvas绘制渐变色矩形 效果演示 相关代码: <!DOCTYPE html> <html lang="en ...

  5. canvas绘制矩形

    canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...

  6. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  7. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  8. canvas绘制形状

    栅格 之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0) ...

  9. canvas 画线

    一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...

随机推荐

  1. Spring Boot Restful WebAPI集成 OAuth2

    系统采用前后端分离的架构,采用OAuth2协议是很自然的事情. 下面开始实战,主要依赖以下两个组件: <dependency> <groupId>org.springframe ...

  2. java 生成随机数字+字母组合 和字母组合

    生成随机数包含数字,字母 /** * 生成随机数当作getItemID * n : 需要的长度 * @return */ private static String getItemID( int n ...

  3. 用户态和内核态&操作系统

    用户态和内核态 内核态:cpu可以访问内存的所有数据,包括外围设备,例如硬盘,网卡,cpu也可以将自己从一个程序切换到另一个程序. 用户态:只能受限的访问内存,且不允许访问外围设备,占用cpu的能力被 ...

  4. 自动化监控系统(二)连接数据库,创建app,添加model,同步数据库

    数据库我使用:mysql5.7 程序连接数据库的模块:pymysql 一.创建数据库: dbname:automatedmonitor 二.使用pip安装pymysql,这里我直接在pycharm上安 ...

  5. Java中在磁盘上复制文件

    使用字节流实现 public static void main(String[] args) throws IOException { InputStream in = new FileInputSt ...

  6. (Struts2学习系列五)Struts2默认action

    当我们访问项目下一个不存在的Action的时候,页面就会报错,404找不到资源,这样对用户来说是非常不友好的,所以我们设置一个默认的Action,当找不到对应Action的时候,就会跳转到默认Acti ...

  7. K-mean matlab 实现代码

    一.K均值聚类算法 算法步骤如下: 1.初始化 已知数据集合X,及事先指定聚类的总类数N,在X中随机选取N个对象作为初始的聚类中心. 2.设定迭代终止条件 通常设置最大循环次数或者聚类中心的变化误差. ...

  8. margin与padding

    1.不加内边距的div: <div style="width:150px; height:150px; ">    <div style="width: ...

  9. mysql和postgresql查询数据库中哪些表包含某个字段

    想知道数据库中哪表含有edu_status字段   mysql> select table_name,column_name from information_schema.columns wh ...

  10. leetcood学习笔记-226- 翻转二叉树

    题目描述: 第一次提交: class Solution(object): def invertTree(self, root): """ :type root: Tree ...