canvas

使用 canvas 实现精灵动画

由 天涯浪子 提交于 2020-01-20 13:38:12
文章首发于个人博客： http://heavenru.com 在最近项目中需要实现一个精灵动画，素材方只提供了一个短视频素材，所以在实现精灵动画之前先介绍两个工具来帮助我们更好的实现需求。在这篇文章中，主要是介绍两个命令行工具来实现将一个短视频文件转化成一张 sprite 图片与如何使用 canvas 绘制精灵动画 两个工具官方地址如下： ffmpeg montage 1、ffmpeg 视频转图片工具 ffmpeg 是「一个完整的跨平台解决方案，用于记录，转换和流式传输音频和视频的工具」，它的作用原不止于这篇文章中所介绍的，有兴趣的同学可以自己去官方网站了解更多。 将视频转成图片输出 基本用法 ./ffmpeg -i jellyfish.mp4 -vf scale=138:-1 -r 8 %04d.png -i 视频流输入 URL -vf 创建由过滤器指定的过滤器，并使用它过滤流，过滤器是要应用于流的过滤器的描述，并且必须具有相同类型流的单个输入和单个输出。对应的过滤器参数必须跟在这个之后，不然无法生效 scale 视频缩放， scale=width:height 其中，如果 height=-1 ，则表示自适应高度，按照视频的宽高比输出,后面紧接这 scale=width:height,setar=16:9 则可以指定输出宽高比 -r 视频输出 fps 值, 值越大，则以越高的

Mouse hover canvas/shape

由 那年仲夏 提交于 2020-01-20 09:22:11
问题 I have this code on in Jquery. I would like to change the opacity percentage of the individual shapes on mouseover. I normaly don't have this kind of problems, but I don't know a lot about canvas... Any help/advice would be appreciate! Thanks in advance! var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.canvas.addEventListener('mousemove', function(event){ var mouseX = event.clientX; var mouseY = event.clientY; var status =

Mouse hover canvas/shape

由 ≯℡__Kan透↙ 提交于 2020-01-20 09:17:55
问题 I have this code on in Jquery. I would like to change the opacity percentage of the individual shapes on mouseover. I normaly don't have this kind of problems, but I don't know a lot about canvas... Any help/advice would be appreciate! Thanks in advance! var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.canvas.addEventListener('mousemove', function(event){ var mouseX = event.clientX; var mouseY = event.clientY; var status =

Mouse hover canvas/shape

由 会有一股神秘感。 提交于 2020-01-20 09:17:46
问题 I have this code on in Jquery. I would like to change the opacity percentage of the individual shapes on mouseover. I normaly don't have this kind of problems, but I don't know a lot about canvas... Any help/advice would be appreciate! Thanks in advance! var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.canvas.addEventListener('mousemove', function(event){ var mouseX = event.clientX; var mouseY = event.clientY; var status =

disabling imageSmoothingEnabled by default on multiple canvases

由 我的未来我决定 提交于 2020-01-20 08:51:25
问题 I'm creating a browser-based game that uses layered canvases and sprite images, and for visual and performance reasons I would like to disable imageSmoothingEnabled by default. It's my understanding that imageSmoothingEnabled isn't available in all browsers, but there are vendor-prefixed versions. I am trying to find an elegant way to disable this attribute by default across all my canvases (in as many browsers as possible). So far, this is my method: context1.imageSmoothingEnabled = false;

HTML canvas move circle from a to b with animation

由 旧时模样 提交于 2020-01-20 08:42:07
问题 I was wondering what would be the best way to move a circle from point A to point B using smooth animation. I get new coordinates with websocket every second and would like to animate the circle move from last point to the new point during that second. I have visualized in this fiddle how the setup would look. I replaced the ws side with manual button input for this test purpose but its missing the function to move the circle. jQuery is welcome too. var x = 100; var y = 50; var r = 10; var

How to use canvas to modify images from another domain?

由 廉价感情. 提交于 2020-01-20 05:25:10
问题 This is the code i am using when i have image.src = "/local/directory/image.png" works but if i use image.src="http://remote/path" it loads the image but rest mousemove function do not work. How do you fix it? copy and paste to test.htm <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script> $(document).ready(function() { var image = new Image(); var ctx = $('#canvas')[0].getContext("2d"); image.src = "http://www.google.com/intl

构建Canvas矢量图形渲染器（一）—— 基础架构、矢量点的绘制

由 那年仲夏 提交于 2020-01-20 04:44:50
本课题是我今年毕业设计的课题，现在我边做边跟大家分享，希望能通过“canvas矢量图形渲染器”让大家对canvas元素和其中的性能优化有更深的理解。 1.首先说说这个矢量渲染器是什么。 canvas元素封装了很对对图形绘制的接口，但是他跟flex相比最大的区别是我们通过fill() 或是 stroke()方法绘制的图形是一张像素图片，当放大或是缩小的时候会出现模糊等各种状况。所以直接调用canvasAPI来绘制矢量图形非常不合适。 这样我们就需要设计一渲染器，里面封装了各种图形的绘制接口，并通过调用渲染器的绘制方法按照我们想发来绘制每一个矢量元素。 每一个矢量元素都是一个继承自矢量图形基类的对象，比如可以使点，线，面等。每一个图形有自己的大小和位置信息，我们依次把每个图形送入渲染器，渲染器结合自己当前的属性（缩放百分比，中心点等）就可以计算出每一个图形需要绘制的真实像素位置，之后再调用canvas的底层API实现图形的绘制。 基本的类图结构如下（在设计的过程当中可能会增加一些新的功能类）： 　 一些点、线、面的基本矢量元素继承自Geometry类，Geometry定义了矢量图形的形状信息。同时也是Vector类的一个属性，Vector类里面还包括矢量元素的其他信息（如id、添加时间等）。 Layer类表示了当前图层的一些基本信息，例如声明了一个图层（大小是400px * 400px

Change cursor over HTML5 Canvas when dragging the mouse

由 瘦欲@ 提交于 2020-01-20 03:54:37
问题 I have made a paint brush type of application using the Canvas Tag . I wanted that when the mouse is on the canvas the Cursor Changes , <canvas id="draw" style="cursor: url(image/pencil.cur)"> I have accomplished this but i cant figure out how shall i change the cursor while I Drag the mouse for drawing the image 回答1: Use the :active CSS pseudo-class to change the cursor when the mouse button is down over the element: #draw:active { cursor: url(image/pencil.cur); } Working example: http:/

Change cursor over HTML5 Canvas when dragging the mouse

由 会有一股神秘感。 提交于 2020-01-20 03:51:47
问题 I have made a paint brush type of application using the Canvas Tag . I wanted that when the mouse is on the canvas the Cursor Changes , <canvas id="draw" style="cursor: url(image/pencil.cur)"> I have accomplished this but i cant figure out how shall i change the cursor while I Drag the mouse for drawing the image 回答1: Use the :active CSS pseudo-class to change the cursor when the mouse button is down over the element: #draw:active { cursor: url(image/pencil.cur); } Working example: http:/
订阅 canvas