canvas
文章平均质量分 56
freedom_文
这个作者很懒,什么都没留下…
展开
-
HTML5 -canvas拖拽、移动 绘制图片可操作移动,拖动
关于canvas 的基础知识就不多说了,可以进这个网址学习http://www.w3school.com.cn/html5/html_5_canvas.asp对于canvas 和 SVG 其实一开始个人是比较倾向于SVG多一点,不过后来工作需要,又学习了下canvas, 这两个之间主要不同是 canvas是在JavaScript中绘制,SVG则是在 XML 绘制其实canvas 主原创 2018-01-12 12:04:09 · 40982 阅读 · 17 评论 -
HTML5 Canvas 开发 绘图方法整理 【三、canvas线条样式、线帽】
1、线条宽度 ctx.lineWidth= 整数值 ; 取值必须为整数,不写默认为1 ,单位默认是px ; ctx.lineWidth=15; //绘制一条高度为15px的直线 ctx.moveTo(120,30); ctx.lineTo(300,30); ctx.strokeStyle="#5DE8E0"; ctx.s...原创 2018-02-13 20:04:25 · 728 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【十三、Canvas重点之:状态 】
Canvas最重要的两个概念,一个是路径,另一个就是状态了。要知道,Canvas 是基于“状态”来绘制的,每次绘制(fill() 或 stroke() )的时候都会检查一次程序中所有的“状态”, 如果当前状态没有任何手动的改变,那么就会一直持续下去。clip() 从原始画布中剪切任意形状和尺寸。clip()可以将某个基本图形设定为...原创 2018-02-20 13:36:03 · 2429 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【十四、将 Canvas画布 作为图片保存并下载】
将Canvas 绘制出来的东西作为图片保存起来,主要使用的是 toDataURL(type) ; type 是可选参数,如果省略 将使用png格式 来保存图片 MIME类型主要是设定图片被保存的类型, 当该扩展名被访问时,浏览器会自动使用指定应用程序打开。<script> let cans=document.getElementById("m...原创 2018-02-20 13:48:54 · 2410 阅读 · 1 评论 -
HTML5 Canvas 绘图方法整理 【十五、Canvas页面交互: 鼠标事件 】
在Canvas中 鼠标事件分为以下三种: 1、鼠标按下 : mousedown 2、鼠标松开 : mouseup; 3、鼠标移动 : mousemove一般需要用到与鼠标有关系的交互 都离不开这三种,例如常用的拖拽、移动、获取当前位置信息等; 不过这里需要知道是的,Canvas 的一些复杂操作都是JavaScript的语法,利用JS来实现的功能,并不是C...原创 2018-02-20 23:05:35 · 3884 阅读 · 0 评论 -
HTML5 Canvas 绘图方法整理 【十七、Canvas透明度 / 图形叠加、层次、冲突】
Canvas 设置透明度 : 语法: ctx.globalAlpha= 属性值; 属性值是 0 - 1之间的数字。 同CSS一样的透明度属性值不过fillStyle 或 strokeStyle 本身也可以自己设定透明值, 所以用到globalAlpha 并不多,不过还是了解下,谁知道哪天会有什么反人类的要求会用到呢 (。・・)ノ <...原创 2018-02-23 17:36:05 · 7092 阅读 · 0 评论 -
HTML5 Canvas 绘图方法整理 【十六、Canvas键盘事件、keyCode对照表】
在Canvas中 键盘事件分为以下两种: 1、键盘按下 : keydown 2、键盘松开 : keyup;附上一份 keyCode值对应表: 键盘事件其实也用的都是JavaScript 的语法:window.addEventListener(type, fn, false);type指的是事件类型, 也就是keydown 或者 keyup...原创 2018-02-21 17:13:49 · 2015 阅读 · 1 评论 -
HTML5 Canvas 绘图方法整理 【十八、Canvas动画/ requestAnimationFrame() 兼容】
Canvas动画 与 一般的JS动画不太一样,因为它并不是用定时器 setInterval() 实现的, 事实上,setInterval() 稍微存在一些性能问题,对于Canvas动画来说不能准确的掌控 动画帧。Canvas在动画中,一般都采用 requestAnimationFrame() ; 请求动画帧, 通过循环,来实现动画的效果;setInterval()需要手动...原创 2018-03-16 20:38:45 · 1771 阅读 · 0 评论 -
【备忘】EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等
示例里工作一般情况是够用了,更复杂的可以查询教程:title 官方解说:http://echarts.baidu.com/option.html#title坐标相关: X轴:http://echarts.baidu.com/option.html#xAxis坐标相关: Y轴:http://echarts.baidu.com/option.html#yAxis&amp;amp;lt;scrip...原创 2018-08-12 19:55:24 · 34757 阅读 · 1 评论 -
【Canvas】字体图标一、 Unicode 字体符号绘制 / 兼容IE
【Canvas】使用icon 字体图标原创 2019-04-07 19:28:51 · 2473 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【十二、Canvas重点之:路径 】
Canvas 路径可以说是一个非常的 ! 相当的! 重要的东西,除了矩形,其他基本所有图形都是以路径为基础的。路径操作有三种方法: beginPath() 起始一条路径,或重置当前路径 closePath() 创建从当前点回到起始点的路径 isPointInPath() 如果指定的点位于当前路径中,则返回 true,否则返回 falsebeginPath(...原创 2018-02-19 15:26:41 · 892 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【十一、Canvas图形阴影&&文字阴影效果】
关于Canvas 阴影效果 分以下四种属性:ctx.shadowBlur 设置阴影的模糊级别 ctx.shadowOffsetX 设置形状与阴影的水平距离。 ctx.shadowOffsetY 设置形状与阴影的垂直距离。 ctx.shadowColor 设置阴影的颜色在CSS3 中也有阴影的效果,两种用起来效果基本相同。阴影效...原创 2018-02-19 15:10:59 · 1060 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【一、需要了解的基础内容】
先说一下提前需要准备的和需要知道的内容:Canvas是一门纯JavaScript操作的技术,截止目前为止,暂时只支持到2D图形, HTML5 主要的2个2D图形技术 就是 Canvas 和 SVG ; 两者大致区别如下: 1、Canvas 是用JavaScript 操作动态生成的, SVG 则是使用XML静态描述生成的; 2、Canvas 基于位...原创 2018-02-12 10:58:50 · 2719 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【二、canvas直线 & canvas矩形】
开始绘制图形之前有一点需要说一下,Canvas 采用的坐标系是W3C的坐标系 : X轴 正方向 向右; Y轴 正方向 向下;所有的绘制方向都以这个为准。Canvas 左上角的坐标是 X :0 ; Y : 0 虽然写负数不会报错,但是Canvas 默认超出部分是不显示的;如图所示: 本章需要用到的API(关注点放在 . 后面就行 ^...原创 2018-02-12 11:19:17 · 1415 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【四、canvas曲线图形 / 圆形】
其实在Canvas 中的基本图形就只有两个 : 直线图形 和 曲线图形 。圆形也算是在曲线图形中,一般画圆的时候必须配套使用 beginPath() 和 closePath(),圆形属于一个“闭合图形”,先在画布上开辟一个路径,画完以后结束路径。语法:ctx.beginPath(); ctx.arc(x,y,半径,开始角度,结束角度, 是否逆时针绘制); 默...原创 2018-02-14 16:21:27 · 1441 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【五、canvas text / 文本、文字相关】
关于 Canvas文本的方法和属性如下 : 另外再加上 fillStyle() 与 strokeStyle();一般情况下都是 fillStyle() 与 fillText() | 或 | strokeStyle() 与 strokeText() 配合着使用;1、描边文字 ctx.strokeText(“要显示的文本”,x , y ,最大宽度); 最大宽度为...原创 2018-02-16 17:30:31 · 1446 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【六、canvas image /canvas绘制图片、平铺图片】
绘制图片目前有三种调用的方式 :1、ctx.drawImage(image,dx,dy); //image 是要显示的图片 dx与 dy 是图片左上角 的横坐标 与 纵坐标, 这种方法中引用的图片可以是JS 创建的,也可以是 直接引用页面中 img标签的图片2、ctx.drawImage(image, dx, dy, dw, dh); 与上面...原创 2018-02-16 17:42:48 · 1212 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【七、canvas 图片切割、自定义文字、字体背景】
Canvas 图片切割语法:ctx.clip(); 从画布中剪切任意形状和尺寸。需要注意的是: 剪切之后,除设定Canvas “状态” 外, 一般都会在裁剪后的图形里绘制。这个不难理解,直接来个示例代码吧:window.onload=function () { let cans=document.getElementById("sixthC")...原创 2018-02-17 19:34:55 · 1487 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【九、Canvas旋转、缩放】
rotate() 旋转当前绘图 (旋转) 语法: ctx.rotate 需要注意的是它默认旋转的原点并不是以之前绘制的图形某一点为原点 而是以Canvas 画布 x轴坐标0 y轴坐标0 的位置为原点的; 可以看下示例代码 ctx.fillStyle="#27A5FF"; ctx.fillRect(50,5...原创 2018-02-17 20:12:10 · 2901 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【八、Canvas 转换】
Canvas 转换方法: 所有单位默认为 “px ” ;转换:Canvas 转换方法: 所有单位默认为 “px ” ;translate() 重新映射画布上的 (0,0) 位置 (平移) 语法:translate(x ,y) x为正数向右移动 y为正数向下移动 <!DOCTYPE html><html lang="en">...原创 2018-02-17 19:56:16 · 475 阅读 · 0 评论 -
HTML5 Canvas 开发 绘图方法整理 【十、Canvas渐变、图形渐变&&文字渐变】
基础渐变三部曲:语法: 1、创建渐变对象 ctx.createLinearGradient(x0,y0,x1,y1); x0,y0 渐变开始点坐标 x1,y1 渐变结束点坐标2、设定渐变样式 addColorStop(value1,”black”); ad...原创 2018-02-19 15:07:41 · 504 阅读 · 0 评论 -
【Canvas】字体图标二、 Iconfont-阿里巴巴 、矢量图标库
【Canvas】字体图标二、 Iconfont-阿里巴巴 、矢量图标库原创 2019-09-29 17:11:39 · 1949 阅读 · 2 评论