摘要: (1)事件问题:我们无法通过JS给画布里面的图像绑定事件。 ctx.isPointInPath(x,y) //我们可以通过这个条件判断触发条件是否在此路径上来添加事件//但是需要记得路径的问题,清除路径。 (2)图像导出,本事canvas画布就是一个图片可以直接另存为 阅读全文
posted @ 2018-06-04 23:48 INSTANCE_SELF 阅读(150) 评论(0) 推荐(0) 编辑
摘要: 8:合成 ctx.globalAlpha 取值为0到1 //默认上面是源,下面是目标 ctx.globalCompositeOperation source-over(默认值):源在上面,新的图像层级比较高 source-in :只留下源与目标的重叠部分(源的那一部分) source-out :只留 阅读全文
posted @ 2018-06-04 23:45 INSTANCE_SELF 阅读(138) 评论(0) 推荐(0) 编辑
摘要: 7:像素操作 ctx.getImageData(x,y,w,h) ImageData对象 width:选中区域在横向上css像素的个数 height:选中区域在纵向上css像素的个数 data:数组 //修改data数组中的rbg值可以更改颜色和透明度 //具体查看API 选中区域所有像素点的rgb 阅读全文
posted @ 2018-06-04 23:42 INSTANCE_SELF 阅读(111) 评论(0) 推荐(0) 编辑
摘要: 5:图像 ctx.drawImage(img,x,y,w,h) :在canvas中引入图片一定在图片加载完成之后再去操作 //飞鸟动画 6:文本: ###在canvas中绘制文本 canvas 提供了两种方法来渲染文本: fillText(text, x, y) 在指定的(x,y)位置填充指定的文本 阅读全文
posted @ 2018-06-04 23:41 INSTANCE_SELF 阅读(176) 评论(0) 推荐(0) 编辑
摘要: ##表盘 1.初始化 将圆心调整到画布的中间 由于canvas中画圆与旋转所参照的坐标系于正常坐标系有出入 将整个画布逆时针旋转90度 初始化一些样式数据 ctx.lineWidth = 8; ctx.strokeStyle = "black"; ctx.lineCap = "round"; 2.外 阅读全文
posted @ 2018-06-04 23:40 INSTANCE_SELF 阅读(457) 评论(0) 推荐(0) 编辑
摘要: 4:变换(原点的偏移,缩放,变大,旋转) ###canvas中的变换 translate(x, y) 我们先介绍 translate 方法,它用来移动 canvas的原点到一个不同的位置。 translate 方法接受两个参数。x 是左右偏移量,y 是上下偏移量, 在canvas中translate 阅读全文
posted @ 2018-06-04 23:36 INSTANCE_SELF 阅读(173) 评论(0) 推荐(0) 编辑
摘要: 3:绘制路径 ###canvas绘制路径 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。 ###步骤 1.首先,你需要创建路径起始点。 2.然后你使用画图命令去画出路径 3.之后你把路径封闭。 4.一旦路径生成,你就能通过描边或填充路径区域来渲染图形。 ## 阅读全文
posted @ 2018-06-04 23:34 INSTANCE_SELF 阅读(706) 评论(0) 推荐(0) 编辑
摘要: 1:canvas元素及基本定义与使用; <canvas id="test" width="400" height="400"></canvas> if(test.getContext) //判断是否有画笔 { var cdx = test.getContext("2d");//代表2d绘图 } 2: 阅读全文
posted @ 2018-06-04 23:33 INSTANCE_SELF 阅读(2350) 评论(0) 推荐(0) 编辑
摘要: 1.注意点 canvas图像的渲染有别于html图像的渲染, canvas的渲染极快,不会出现代码覆盖后延迟渲染的问题 写canvas代码一定要具有同步思想 在获取上下文时,一定要先判断 画布高宽的问题 画布默认高宽300*150 切记一定要使用html的attribute的形式来定义画布的宽高 通 阅读全文
posted @ 2018-06-04 23:31 INSTANCE_SELF 阅读(194) 评论(0) 推荐(0) 编辑
摘要: 一:语义化标签 <hgroup></hgroup> <header></header> <nav></nav> <section></section> <footer></footer> <article></article> <aside></aside> 二:语义化的好处 HTML5可以让很多更 阅读全文
posted @ 2018-06-04 23:25 INSTANCE_SELF 阅读(137) 评论(0) 推荐(0) 编辑
摘要: (1)<!DOCTYPE html> //告诉游览器渲染方式 /* 在ie9往上的浏览器中,三种模式在渲染方面几乎没有区别 在ie 7 8 9中,理论上存在怪异模式,实际只有标准模式 在ie6中,标准模式和怪异模式渲染的区别最大 在ie6以下的浏览器中,只有怪异模式 */ <meta charset 阅读全文
posted @ 2018-06-04 23:21 INSTANCE_SELF 阅读(141) 评论(0) 推荐(0) 编辑
摘要: ###1.什么是attribute,什么是property html标签的预定义和自定义属性我们统称为attribute js原生对象的直接属性,我们统称为property ###2.什么是布尔值属性,什么是非布尔值属性 property的属性值为布尔类型的 我们统称为布尔值属性 property的 阅读全文
posted @ 2018-06-04 23:20 INSTANCE_SELF 阅读(210) 评论(0) 推荐(0) 编辑