canvas绘制矩形

canvas提供了三个API，分别是：

1.绘制一个填充的矩形
   fillRect(x, y, width, height)
2.绘制一个矩形的边框
   strokeRect(x, y, width, height)
3.清除指定矩形区域，让清除部分完全透明
   clearRect(x, y, width, height)

其中x、y是相对于画布左上角0,0 的距离，width是宽度，height设置矩形高度；

实例1

     window.onload=function(){var canvas = document.getElementById('canvas');canvas.width='300';canvas.height='300';var ctx = canvas.getContext('2d');//在x轴为10，y轴为10的位置画长为120，宽为80的长方形ctx.strokeRect(10,10,120,80);//在x轴为120，y轴为120的位置画长为160，宽为100的填充长方形ctx.fillRect(120,120,160,100);}

绘制了两个长方形一个只有有边框的，一个只有填充的

实例2

 window.onload=function(){var canvas = document.getElementById('canvas');canvas.width='300';canvas.height='300';var ctx = canvas.getContext('2d');//在x轴为30，y轴为30的位置画边长为120的正方形ctx.fillRect(30,30,120,120);//在x轴为50，y轴为50的位置清除边长为80的正方形区域ctx.clearRect(50,50,80,80);}

可以看到黑色的正方形里面被清除出来一个边长为80的正方形区域，clearRect就是这个作用

我们可以尝试在清除出来的区域里面再画一个正方形

 window.onload=function(){var canvas = document.getElementById('canvas');canvas.width='300';canvas.height='300';var ctx = canvas.getContext('2d');//在x轴为30，y轴为30的位置画边长为120的正方形ctx.fillRect(30,30,120,120);//在x轴为50，y轴为50的位置清除边长为80的正方形区域ctx.clearRect(50,50,80,80);//在x轴为70，y轴为70的位置画边长为40的正方形ctx.fillRect(70,70,40,40);}

看到如下效果

canvas绘制矩形相关推荐

android之canvas绘制矩形
需求:想实现使用canvas绘制矩形实现如下: @SuppressLint("AppCompatCustomView") public class MyImageView ext ...
教你用canvas绘制矩形
:点上面关注免费学习前端知识! 矩形是唯一一种可以直接在2D上下文中绘制的形状.与矩形有关的方法包括fillRect() . strokeRect() 和 clearRect() .这三个方法都能接收 ...
html 绘制矩形,HTML5中使用canvas绘制矩形
canvas是HTML5中新增的一个元素,使用Canvas可以绘制任何你喜欢的图形.先来认识什么是Canvas? 1.在页面上放置一个canvas元素,就相当于在页面上放置了一块"画布&qu ...
Canvas | 绘制矩形、实心空心圆、三角形、线条
#Canvas ##基本属性一个画布在网页中是一个矩形框默认情况下 canvas 元素没有边框和内容.使用 style 属性来添加边框: canvas 元素本身是没有绘图能力的.所有的绘制工作必须 ...
微信小程序canvas绘制矩形
绘制边框矩形 ctx.beginPath(); //矩形边框 ctx.lineWidth=36 * rpx; //矩形变宽颜色 ctx.strokeStyle="#DBDBDB"; ...
canvas基础-绘制矩形（1）
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的& ...
html5 Canvas 绘制基本图形从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形从绘制直线到路径 Jack Lee 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
canvas绘制多个矩形实现热区图功能
热区图功能: 在运用后台上传一张背景图,在背景图上框选指定区域,配置对应的跳转链接或领券信息小程序端判断用户点击位置是否在矩形框选范围内,如果在指定范围内,根据后台配置的功能进行页面跳转或领券. 运 ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...

canvas绘制矩形

canvas提供了三个API，分别是：

实例1

实例2

我们可以尝试在清除出来的区域里面再画一个正方形

canvas绘制矩形相关推荐

最新文章

热门文章