cocos 修改canvas的widget

2024-09-03

Cocos Creator 动态设置Canvas的宽度与高度，更改适配

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

JavaScript修改Canvas图片

用JavaScript修改Canvas图片的分辨率(DPI) 应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(DPI)是72 这个DPI太低, 导致打印出来的图片会很模糊. 修改DPI的常规做法是把图片上传到服务器用C#修改DPI后再下载到服务端但是心里觉得很憋屈, 分明已经在客户端生成了图片, 仅仅为了修改一个很小的标记(DPI信息只是JPEG格式的一个头部META)要上传一张很大的图片到服务端折腾一遭.

用JavaScript修改Canvas图片的分辨率(DPI)

应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(DPI)是72 这个DPI太低, 导致打印出来的图片会很模糊. 修改DPI的常规做法是把图片上传到服务器用C#修改DPI后再下载到服务端但是心里觉得很憋屈, 分明已经在客户端生成了图片, 仅仅为了修改一个很小的标记(DPI信息只是JPEG格式的一个头部META)要上传一张很大的图片到服务端折腾一遭. 后来使用了下面的方法用JavaScript直接修改了DPI 这

HTML5 javascript修改canvas的大小

方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别: window.onload = function(){ canvas.height = 100; canvas.width = 200; } changeCanvasSize = function(){ canvas.height = 100; canvas.width = 200; } 方法2: 修改带固定的尺寸,这种方式跟第一种很相似,需要传递参数,这也没什么: changeCanvasSize = funct

cocos creator 场景如何透明，多个canvas层级显示

转载地址: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里面,我就

HTML5 程序设计 - 使用HTML5 Canvas API

请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方便查看. 学习笔记,纯手工码字,有错别字什么的请指出,觉得好的请点个赞小小的支持下.谢谢亲们. 本篇,我们将探索如何使用HTML5和Canvas API.Canvas API很酷,可以通过它来动态生成和展示图形.图表.图像以及动画. 本篇将使用渲染API(Rendering API)的基本功能来创建

HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas" width="600" height="300">您的浏览器不支持canvas,可以选择升级您的浏览器</canvas> 2 开发基于canvas的应用程序的最基本的几个操作 1),使用document.getElementById()方

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1.js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame 2.css3 3.svg 4.canvas(当然,这个还是要配合js) 也许这么分类是不对的,因为无论如何都需要脚本控制,那么也许应该分为 1.js+传统css 2.css3 3.js+svg 4.js+canvas 但由于requestAnimationFrame比较特殊,所以还是单独出来说吧. 1.setTimeout和requestAnimationFrame

html5 Canvas API

详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单.2.在网页上使用canvas元素时,它会创建一块矩形区域.默认情况下该矩形区域宽为300像素,高为150像素,但也可以自定义具体的大小或者设置canvas元素的其他特性.复制代码 1 <body> 2 <div> 3 <header> 4

关于H5中的Canvas API的探索

Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上使用canvas元素时,它会创建一块矩形区域,默认为300px*150px (w*h),可以自定义具体大小和canvas元素的其他特性. 基本canvas元素: 在页面加入canvas元素后,可以通过js脚本来控制它,可以在其中添加图片.线条以及文字,也可以在里面绘图,甚至可以加入高级动画. 使用c

HTML5 canvas易错点

一.画布的默认宽高 <canvas id="myCanvas" style="border:1px solid black;"> 你的浏览器不支持html5 </canvas> 通过火狐浏览器访问,看到通过截图工具发现,矩形的宽为300 高为150.但是我在w3school中看到的信息室说canvas默认宽高都为300 不过不是我要讨论的东西,可先忽略. 我们知道canvas只是html的一个新标签.因此,我们也可以用css来修改canva

Canvas学习系列一：初识canvas

最近你开始在学习canvas,打算把学习canvas的整个学习过程当中的一些笔记与总结记录下来,如有什么不足之处还请大神们多多指出. 1. 认识canvas Canvas元素的出现,可以说开启的Web世界绘制动画,图形的大门,其功能非常强大canvas 元素是HTML5中功能最强大的元素,它的能力主要是通过Canvas中的Context(绘图上下文/绘图环境)对象表现出来的.该对象从canvas本身获取. 获取context对象 var canvas = getElementById('canv

[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法

canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的.canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支持canvas,谷歌和火狐的支持性很好,IE8不支持.你可以参考这个网站,查看canvas的支持性:http://www.caniuse.com/#search=canvas,当然他还能查询到css3和html5等很多web新潮技术在各浏览器的支持性. 如何使用canvas? 要使用canvas,一

canvas刮刮乐游戏等

裁剪 ctx.clip():当前路径外的区域不再绘制 <canvas id="cans" width=500 height=500></canvas> <script> var oCanvas = document.getElementById('cans'); var ctx = oCanvas.getContext('2d'); ctx.arc(200,200,100,0,Math.PI * 2,0); ctx.stroke(); ctx.cli

canvas入门笔记

1.Canvas的使用注意 A.要在页面中添加一对canvas标记,默认占300*150的区域 B.我们可以通过html属性‘width’,‘height’来设置canvas的宽高,不可以通过css属性来设置宽高. C.Canvas相当于是一张白纸,如果想要在这个白纸上绘图,你需要一套绘图工具获取绘图工具的方式:var ctx = Canvas.getContext('2d'); 练习: 2.Canvas绘制会用到的方法 ctx.moveTo(x,y):将绘图工具移动到x,y坐标点

如何修改ionic中android程序的包名

默认ionic新建工程的时候指定的Android版本包名是:com.ionicframework.starter:这样固定死包名的话会导致一个问题,多个ionic工程无法正常安装到手机当中,后面安装的程序始终会把之前的程序覆盖掉,这样的话就太悲剧了. 现在给大家演示一下如何修改ionic工程的包名: 1.修改android工程下源码文件的路径和Java文件的包名: 修改java文件包名:找到platforms\android\src\com\ionicframework\starter\*.ja

HTML5 Canvas游戏开发（二）高级功能

一.变形 1.放大和缩小 scale(X,Y)函数. 当使用该函数时,其起始坐标值也被放大或缩小.当X.Y为负值时,可以实现翻转. 2.平移变换 translate(X,Y)函数. 表示水平方向向左移动,竖直方向向下移动. 3.旋转变换 rotate(角度)函数. 旋转一定角度,是以canvas的起始坐标坐标(0,0)为中心旋转.可使用translate修改canvas的中心. 4.setTransfrom函数实现倾斜效果可使用transfrom()函数代替上述三种函数的功能. 二.图形的渲染

Canvas简述

HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单. 在网页上使用canvas元素时,它会创建一块矩形区域.默认情况下该矩形区域宽为300像素,高为150像素,但也可以自定义具体的大小或者设置canvas元素的其他特性. 1 <body> 2 <div> 3 <header> 4 <h1>inde

Tkinter画布-Canvas

Python - Tkinter画布-Canvas: Canvas是一个长方形的面积,图画或其他复杂的布局.可以放置在画布上的图形,文字,部件,或是帧 Canvas是一个长方形的面积,图画或其他复杂的布局.可以放置在画布上的图形,文字,部件,或是帧. 语法: 这里是一个简单的语法来创建这个widget: w = Canvas ( master, option=value, ... ) 参数: master: 这代表了父窗口. options: 下面是这个小工具最常用的选项列表.这些选项可以作为

canvas知识01

本文转自:http://www.cnblogs.com/jsdarkhorse/archive/2012/06/29/2568451.html 更多参考:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#-1 1.HTML Canvas API有两方面优势可以弥补首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简

有关Canvas的一点小事—canvas和resize

之前就说了canvas设置大小的时候用的就是设置实打实的像素值,像图像一样设置百分比然后根据浏览器大小自己适应大小是不可能的——当然一般也不会想要cavans改变大小.不过项目之前有用到过,既然去了解了,就记下来防止忘记. 不能自己适应,就只能每次外部容器发生改变的时候给它重新设置大小了. 1. $(selector).resize()—布局调整大小的时候触发查了查jquery好像有resize函数,顿时很惊喜,然而发现并没有什么用,它只支持$(window).resize(functio

cocos 修改canvas的widget

热门专题