canvas绘制线和矩形
###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绘制线和矩形的更多相关文章
- WPF使用Canvas绘制可变矩形
1.问题以及解决办法 最近因为项目需要,需要实现一个位置校对的功能,大致的需求如下:有一个图片,有一些位置信息,但是位置信息可能和实际有些偏差,需要做简单调整,后面会对这张图片进行切割等,做些处理.( ...
- Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果
绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...
- canvas 绘制矩形和圆形
canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...
- 使用canvas绘制渐变色矩形和使用按键控制人物移动
使用canvas绘制渐变色矩形和使用按键控制人物移动 1.使用canvas绘制渐变色矩形 效果演示 相关代码: <!DOCTYPE html> <html lang="en ...
- 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 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- canvas绘制形状
栅格 之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0) ...
- canvas 画线
一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...
随机推荐
- HTML5篇
[HTML5十大新特性] (1) 语义化标签 (2) 增强型表单 (3) 视频和音频 (4) canvas绘图 (5) SVG绘图 (6) 地理定位 (7) 拖放API (8) Web Worker ...
- Java中有趣的String、StringBuffer与StringBuilder
String介绍 String类属于java.lang包中,String类是不可变类,任何对String的改变都会引发新的String对象的生成. 创建String的两种方式: 1.通过构造器创建:S ...
- linux每日命令(1):gzip命令
gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用. gzip不仅可以用来压缩大的.较少使用的文件以节省磁盘空间,还可以和tar命令一起构成Linux操作系统中比较流 ...
- Ubuntu安装mongo可视化工具
一.robo 3T 是mongodb的一个非常好用的可视化管理工具,曾经名为robomongo,现在被收购后改名为robo 3T.且现在robo 3T 1.1版本能支持mongodb3.4.现在在Ub ...
- 使用PHP如何去除字符串结尾的字符
前言 在工作中遇到一个需求:一串字符串,如"迅雷官方下载"."快播5.0下载",需要去掉他们结尾的"官方下载"和"下载" ...
- 22-1-sort
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- EE5111_A0206839W
EE5111 Selected Topics in Industrial Control & Instrumentation Assessment: Implement a simple ...
- 支付宝支付接口-app支付沙箱环境
说明 开发阶段 需要验证自己的app支付加签是否正确,这里使用沙箱环境来进行模拟,使用ali的沙箱测试app和沙箱钱包app进行校验 准备阶段 1.进入沙箱页面 2.找到app支付文档 https:/ ...
- jq-demo-点击改变图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- shell脚本明文密码隐藏且加密
将密码放到文件中去,比如/root/.pass.txtpassword=`</root/.pass.txt`还怕密码泄露的话,就把pass.txt权限设置下. chattr +i /root/. ...