let c = this.node.getComponent(cc.Canvas);c.fitHeight = true;c.fitWidth = false; let h = 960 * cc.winSize.height / cc.winSize.width; c.designResolution = new cc.Size(960, h);this.node.setContentSize(960, h); // 适配解决方案 let _canvas = cc.Canvas.instance

最近做一个项目,在一个多行文本框(TextBox)里显示新闻内容,由于内容有多有少,并且总是出现垂直滚动条,很不好看,笔者就想用一个法子,去掉垂直滚动条,并且文本框的高度随内容的增加而变大,使高度适应内容增加. 方法一:对于英文,可以直接用一个Label控件实现显示内容,因为它会随内容增加而增长. 方法二:是本人采用的多行文本框方法. 部分代码如下:(本文采用表格定位,TextBox放在一个单元格内) 以下是代码片段:<table> ........... <TR> <asp

转载地址:https://forum.cocos.com/t/creator-canvas/55373/14 Creator 版本:1.7 目标平台:WEB MOBILE 项目需要,页面做了多个Canvas,不同的Canvas可以调整Css的zIndex来调整渲染层级关系: 不过cocos自带的Canvas底层会盖着一层黑色的颜色,怎么去掉? 截这些图就为了说明cc.find('Canvas').active = false;执行之后,依然有一层黑颜色遮盖到cocos引擎的Canvas里面,我就

业务场景 在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的 github源码链接 https://github.com/richard1015/canvas 微信IDE代码预览 https://developers.weixin.qq.com/s/DBZhf8mB7qaD 海报需求设计图分析 图1分析: 可以看到海报 要求宽750 高1218(当然了数据是动态

本文将会从水波的基本原理开始,详细讲解在canvas中模拟水波扩散,分析并计算水波的能量分布,并通过振幅模拟水波对图像的折射效果,最后实现水波特效. 水波基本原理 首先复习一波高中物理知识. 波是指振动的传播.波的传播方向与质点振动方向垂直的为横波,相同则为纵波,水波是横波和纵波的叠加. 对于水波这种波,我们在实现这个特效的时候,需要考虑到下面的特性: 圆形波:当你投一块石头到水池中时,你会看到一个以石头入水点为圆心所形成的一圈圈的水波 反射:水波碰到墙壁后会反射 衰减:因为水是有阻尼的,所以你

摘要:初略算了算大概有20天没有写博客了,原本是打算1月1号元旦那天写一个年终总结的,博客园里大佬们都在总结过去,迎接将来,看得我热血沸腾,想想自己也工作快2年了,去年都没有去总结一下,今年势必要总结一番了,但是工作任务有点紧,就把这件事搁置起来了,只好推到来年收假去写一篇总结性的博客了,说起写博客,还是我的一个室友推荐我来写的,当时就觉得上班任务都做不完,哪有时间来写博客,后来发现自己有问题就去找别人的博客来解决,就想着自己也写博客,把自己不知道或者有经验的记录下来,一方面以后遇到同样的问题可

最近做了一个微信内访问的H5页面,长按分享图片发送朋友邀请的海报,网上搜索资料,得出解决思路,用canvas将页面绘制生成图片, 问题:canvas 图片跨域. 解决过程(填坑历程): 1.从网上存在如图解决办法     img.crossOrigin  = ""   (专业采坑,数年).亲测无效.很是不解. 2.网上也存在后端服务解决 设置header头,或者nginx 服务配置等 允许访问.但是,存在问题(图片大部分为了优化,都会存放在第三方cdn.上面.这是第三方的配置,是否允许

原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状图和圆环图上显示数字信息. 与从零到一创建图表相比,其实有更简便的方式,例如用CodeCanyon上的这个图表库 但是如果你想知道库背后的原理,往下读. 什么是饼状图? 图表是用来图形化展示数据的工具. 饼状图将数据用切割成份的圆来展示. 每份的大小代表了数据值所代表的比例大小. 什么是圆环图? 简

最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来自于 http://developer.51cto.com/art/201503/467645.htm html代码: <!DOCTYPE html>     <html>     <head>         <meta http-equiv="Conte

导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语.demo下载   前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.

清单 1. 绘制 canvas 矩形 function drawRect(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // 获取 2D 渲染上下文 ctx.clearRect(0,0,300,200) ;// 清除以(0,0)为左上坐标原点,300*200 矩形区域内所有像素 ctx.fillStyle = '#00f';

<virtual> new Canvas(width, height) 参数: width:canvas宽度 height:canvas高度 方法: applyShadow(shape, drawFunc):应用阴影. shape:形状. drawFunc:绘画函数. clear():从canvas中清除当前层.暂不支持. fill(shape):填充形状. fillStroke(shape):给描边填充形状. getContext():获取canvas上下文. getElement():获取

一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,textarea以外的不可编辑的标签具备可编辑功能: 用法如下: //contenteditable="true" 当属性值为true的时候,可编辑标签内可以写入标签,对于复制的具有样式的内容,其样式会保留:<div contenteditable="true">

原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画

匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的.其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的. <head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script> window.onload = function () { var

如图所示: 画布组件:dashboard.vue <template> <div> <canvas ref="canvas" v-if="change" id="canvas" width="600" height="400" style="width: 300px;height: 200px;"></canvas> </div>

一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘制图片本身的复杂性,导致canvas绘制频率和浏览器绘制频率不同步,出现图片出不来或者延迟出现,这过程中间就出现了空白显示为canvas底图颜色白色的情况.这里说的闪烁是,在单击地图移动图例时,文字前面的图片并没有出来.但是单击地图准备移动图例时别松开鼠标图片能出来,这个有点奇怪.... 有些解决方

canvas Retina 屏幕优化 /** * HiDPI Canvas Polyfill (1.0.9) * * Author: Jonathan D. Johnson (http://jondavidjohn.com) * Homepage: https://github.com/jondavidjohn/hidpi-canvas-polyfill * Issue Tracker: https://github.com/jondavidjohn/hidpi-canvas-polyfill/

 分类: html5(9)  原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合s

前言 之前上一篇随笔说了Canvas截图网页为图片,下来个新需求,把网页截图后保存为PDF文件供用户下载. 前文 Canvas截图网页为图片:https://www.cnblogs.com/bubububu/p/9951185.html 正文 需求:用户点击下载,将页面保存为PDF文件并下载. 思路:继续使用Canvas截图后将画布内容转换为pdf文件. 首先我们需要引入js文件jspdf.debug.js   下载路径 https://github.com/MrRio/jsPDF 引入canv

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con