博客首页 → canvas

最新文章列表

基于HTML5 Canvas 实现弹出框

　　用户鼠标移入时，有弹出框出现，这样的需求很常见。这在处理HTML元素实现时简单，但是如果是对HTML5 Canvas 构成的图形进行处理，这种方法不再适用，因为Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体。而图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。然而，在HT for Web中， ...
hightopo拓扑图CanvasHT for Web弹出框 
xhload3d 评论(0) 有642人浏览 2017-06-05 09:51

基于HTML5 Canvas实现用户交互

    很多人都有这样的疑问，基于HTML5 Canvas实现的元素怎么和用户进行交互？在这里我们用到HT for Web（http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html）写了个Demo进行示例。     场景如下所示，在该场景中双击温度和湿度下的Node，会生成输入框供用户填写内容，这之后， ...
HTML5HT for Web拓扑图Canvas交互 
xhload3d 评论(0) 有595人浏览 2017-05-23 14:31

Canvas 输出位图

一 介绍 toDataURL()是canvas中将图片的二进制格式转为dataURL格式使用的方法。 dataURL是将数据按base64进行编码，它是一种保存二进制的方式。 下面通过这种方法输出位图。   二 代码 <!DOCTYPE html> <html> <head> <meta name="author" ...
Canvas输出位图 
cakin24 评论(0) 有1222人浏览 2017-04-09 08:13

Canvas 像素处理之高亮处理

一 定义和用法 getImageData()方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。 注意：ImageData对象不是图像，它规定了画布上一个部分（ ...
Canvas像素亮亮处理 
cakin24 评论(0) 有1558人浏览 2017-04-09 08:06

Canvas 位图裁剪

一 位图裁剪方法 1、将需要从位图上裁剪的部分定义成Canvas的路径。 2、调用CanvasRenderingContext2D的的clip（）方法把路径剪切出来。 3、绘制位图——此时只要被clip（）的路径覆盖的部分才会被显示出来。 二 代码 <!DOCTYPE html> <html> <head> <meta name=&q ...
Canvas位图裁剪 
cakin24 评论(0) 有943人浏览 2017-04-08 08:58

Canvas 像素处理之改变透明度

一 定义和用法 getImageData()方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。 注意：ImageData对象不是图像，它规定了画布上一个部分（ ...
Canvas透明度 
cakin24 评论(0) 有2089人浏览 2017-04-08 08:56

Canvas 位图填充

一 位图填充方法 1、调用createPattern方法创建位图填充，该方法返回一个CanvasPattern对象。 2、将CanvasPattern对象赋值给CanvasRenderingContext2D的fillStyle或StrokeStyle属性。 二 代码 <!DOCTYPE html> <html> <head> <met ...
Canvas位图填充 
cakin24 评论(0) 有1012人浏览 2017-04-07 19:08

Canvas 圆形渐变

一 介绍 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。 以下是设置Canvas圆形渐变的方法： createRadialGradient(x,y,r,x1,y1,r1) - 创建一个圆形渐变。 当我们使用渐变对象，必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1. 使用渐变，设置fi ...
Canvas圆形渐变 
cakin24 评论(0) 有2797人浏览 2017-04-07 19:01

Canvas 线性渐变

一 介绍 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。 以下用来设置Canvas的线性渐变： createLinearGradient(x,y,x1,y1) - 创建线条渐变。 当我们使用渐变对象，必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。 使用渐变，设置fillStyle或 ...
Canvas线性渐变 
cakin24 评论(0) 有1042人浏览 2017-04-06 20:55

canvas写的地铁地图

根据的是百度提供的坐标，canvas的坐标是大的坐标在后面，所以跟实际生活方向相反。 所以canvas里的北方在下方，实际生活中北方在上方。 因为根据的是真实坐标，所以跟广州地铁提供的地图不一样。 左侧地图一种写法，右侧地图另一种写法。 左侧可以下拉菜单选择线路查看路线，还可以查询站名属于哪个路线；右侧是全地图。 暂时没有其他功能……欢迎指点。 看代码可以戳链接：https://github. ...
canvas 
hiuman 评论(0) 有2041人浏览 2017-03-06 21:06

html5 Canvas 钟表

html5 canvas 画钟表例子，参考别人的例子，整理完成，有详细注释 参考：http://www.html5tricks.com/demo/html5-canvas-circle-clock/index.html   <!DOCTYPE html> <htm ...
jshtml5canvas 
davidforit 评论(0) 有827人浏览 2017-01-11 16:20

HTML5 Canvas几种画法

html5 Canvas画布画图几种常见方法 参考地址： http://www.w3school.com.cn/html5/html_5_canvas.asp http://www.cnblogs.com/Abner5/p/5845367.html html <!DOCTYPE html> <html> ...
html5canvas 
davidforit 评论(0) 有628人浏览 2016-12-28 15:46

canvas的用法

包括： 介绍。 基础入门。（兼容性。获取canvas上下文。绘制直线/描边，填充内容。绘制表格。） canvas是基于状态的绘图。 绘制矩形。 绘制圆形。 绘 ...
canvas 
hiuman 评论(0) 有909人浏览 2016-11-04 14:47

html5之canvas

引用： https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial 示例： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> ...
html5canvas 
Lixh1986 评论(0) 有682人浏览 2016-10-24 15:15

canvas绘图

<canvas id="tetris" width="1800" height="900"></canvas> <script type="text/javascript"> var canvas = document.getElementById("tetr ...
canvas 
Peerless_ 评论(0) 有267人浏览 2016-10-12 14:25

canvas绘制渐变图案

就是有点晃眼! 随机截取图片三张.如下: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.1.0.min. ...
html图形变换canvas旋转 
小娘子_别跑啊 评论(0) 有671人浏览 2016-09-09 23:28

canvas学习（十）：font字体设置

canvas中的字体设置比较简单，这里就不说别的了，直接上实例代码： window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas.getContext("2d")){ //宽高自适应 //myCanvas.width ...
canvasfont字体设置 
wjiaoling136 评论(0) 有2181人浏览 2016-08-10 15:10

数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向，接着就朝这个方向慢慢打磨，如今 HT 算是达到了这样的效果，谈不上用尽洪荒之力，但我们对产品结果很满意，特别是 HT 的用户手册，将例子和文档无缝融合一体，小小 10 来兆开发包居然包含了四十五份手册，数百个活生生的 H ...
HTML5电信网管拓扑图Canvas工业控制 
xhload3d 评论(0) 有1859人浏览 2016-08-10 01:47

canvas学习（十四）：canvas交互之isPositonInPath

先说说用到的两个方法： 1、isPositonInPath(x,y):判断(x,y)是否在canvas绘制的图形所在路径中。不太理解的可以参考W3School中的“HTML5 canvas isPointInPath() 方法” 2、getBoundingClientRect()：这个方法用来用来获取元素位置，即获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBounding ...
canvascanvas交互isPositonInPathgetBoundingClientRect 
wjiaoling136 评论(0) 有1036人浏览 2016-08-04 15:05

canvas学习（九）：使用arcTo绘制一轮弯月

arcTo()函数讲起来有点绕，也不太好懂，大家可以先去这里了解了解，我就不多说了。 先上个效果图：  再来个分析图： （PS： 1、图中各个坐标点为 ...
canvasarc()arcTo()canvas绘制弯月 
wjiaoling136 评论(0) 有990人浏览 2016-07-14 18:25

最近博客热门TAG

Java(141747) C(73651) C++(68608) SQL(64571) C#(59609) XML(59133) HTML(59043) JavaScript(54918) .net(54785) Web(54513) 工作(54116) Linux(50906) Oracle(49876) 应用服务器(43288) Spring(40812) 编程(39454) Windows(39381) JSP(37542) MySQL(37268) 数据结构(36423)

博客人气排行榜

    博客电子书下载排行

      >>浏览更多下载

      相关资讯

      相关讨论

      Global site tag (gtag.js) - Google Analytics