canvas
Insist_bin
这个作者很懒,什么都没留下…
展开
-
Canvas基础语法
1.1 什么是Canvascanvas是HTML5提供的一个用于展示绘图效果的标签,canvas原意画布,帆布,在HTML5页面中用于展示绘图效果,最早canvas是苹果提出来的一个方案,今天已经在大多数浏览器实现了1.1.1 canvas的基本用法基本语法<canvas></canvas>使用canvas标签,即可在页面中开辟一格区域,可以设置其width和height设...原创 2018-05-11 15:26:20 · 667 阅读 · 0 评论 -
canvas绘制形状
1.1 绘制形状1.1.1 绘制矩形绘制矩形路径ctx.rect(startX, startY, width, height);绘制矩形框(描边矩形)ctx.strokeRect(startX, startY, width, height);绘制填充矩形ctx.fillRect(startX, startY, width, height);清除矩形区域ctx.clearRect(startX, s...原创 2018-05-11 15:30:55 · 354 阅读 · 0 评论 -
canvas绘制图片
ctx.drawImage()绘制图片:有三种方式- 3参数:图像资源、绘制的起始x坐标、绘制的起始y坐标- 5参数:图像资源、绘制的起始x坐标、绘制的起始y坐标、绘制的宽、绘制的高- 9参数:图像资源、裁剪的x坐标、裁剪的y坐标、裁剪的宽度、裁剪的高度、绘制的起始x坐标、绘制的起始y坐标、绘制的宽、绘制的高...原创 2018-05-11 15:33:46 · 305 阅读 · 0 评论 -
canvas中状态保存与回滚,和平移/旋转/缩放的应用
1.1、状态保存:ctx.save();把当前状态(绘制环境的所有属性)复制一份保存起来,多次调用可以保存多份状态1.2、状态回滚:restore();把最近保存的一次状态作为当前状态回滚一次会把上次保存的属性删掉再回滚会拿到上次保存的属性可多次回滚,一次往回找save保存的属性2.1、translate(x轴平移量,y轴平移量)平移坐标轴:已绘制的图形不会收到影响,只会影响平移之后绘制的,平移会...原创 2018-05-11 15:46:58 · 1709 阅读 · 0 评论 -
canvas中如何判断点是否在路径上
判断点是否在路径上ctx.isPointInPath( 要判断点的x坐标,要判断点的y坐标 )<canvas id="cvs"></canvas><script> /* * ctx.isPointInPath( 要判断的点x轴坐标,要判断的点y轴坐标 ) * */ var cvs = document.querySelector...原创 2018-05-11 15:49:42 · 2777 阅读 · 0 评论