2018年6月7日
运算符
摘要： 1：可变变量概念：可变变量是一种独特的变量，它允许动态改变一 个变量名称。 可变变量的工作原理：该变量的名称由另外一个变量的值来确 定，实现过程就是在变量的前面再多加一个美元符号“$”。 2: 按位与运算 按位与运算符“&”是双目运算符。其功能是参与运算的两数各对应的二进位相与。只要对应的二个二进位 阅读全文
posted @ 2018-06-07 16:50 INSTANCE_SELF 阅读(154) 评论(0) 推荐(0)
PHP安装配置工具
摘要： 1：JetBrains PhpStorm 2017.3 x64 破解版，下载地址和破解方法 http://www.oyksoft.com/soft/40722.html http://blog.csdn.net/kaishizige/article/details/79300238 XAMPP+PH 阅读全文
posted @ 2018-06-07 16:48 INSTANCE_SELF 阅读(330) 评论(0) 推荐(0)
2018年6月4日
导出为图像和事件问题
摘要： （1）事件问题：我们无法通过JS给画布里面的图像绑定事件。 ctx.isPointInPath(x,y) //我们可以通过这个条件判断触发条件是否在此路径上来添加事件//但是需要记得路径的问题，清除路径。 （2）图像导出，本事canvas画布就是一个图片可以直接另存为 阅读全文
posted @ 2018-06-04 23:48 INSTANCE_SELF 阅读(155) 评论(0) 推荐(0)
合成
摘要： 8：合成 ctx.globalAlpha 取值为0到1 //默认上面是源，下面是目标 ctx.globalCompositeOperation source-over(默认值):源在上面,新的图像层级比较高 source-in :只留下源与目标的重叠部分(源的那一部分) source-out :只留 阅读全文
posted @ 2018-06-04 23:45 INSTANCE_SELF 阅读(158) 评论(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 阅读(124) 评论(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 阅读(181) 评论(0) 推荐(0)
时钟练习
摘要： ##表盘 1.初始化 将圆心调整到画布的中间 由于canvas中画圆与旋转所参照的坐标系于正常坐标系有出入 将整个画布逆时针旋转90度 初始化一些样式数据 ctx.lineWidth = 8; ctx.strokeStyle = "black"; ctx.lineCap = "round"; 2.外 阅读全文
posted @ 2018-06-04 23:40 INSTANCE_SELF 阅读(485) 评论(0) 推荐(0)
变换
摘要： 4：变换（原点的偏移，缩放，变大，旋转） ###canvas中的变换 translate(x, y) 我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。 translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量， 在canvas中translate 阅读全文
posted @ 2018-06-04 23:36 INSTANCE_SELF 阅读(184) 评论(0) 推荐(0)
绘制路径
摘要： 3：绘制路径 ###canvas绘制路径 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。 ###步骤 1.首先，你需要创建路径起始点。 2.然后你使用画图命令去画出路径 3.之后你把路径封闭。 4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。 ## 阅读全文
posted @ 2018-06-04 23:34 INSTANCE_SELF 阅读(757) 评论(0) 推荐(0)
canva基本使用和绘制矩形
摘要： 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 阅读(2463) 评论(0) 推荐(0)