标签 - 动漫 - 彼岸网

相关帖子	版块	作者	回复/查看	最后发表

热度 3 天香公主 2015-3-1 07:23 PM

看到欣闻贴的＂动漫高手们看过来＂，试着做个穷人版。制作过程原图: １）风景图２）飞鸟图用Photoshop将第一张图中间的柱子的上半部分挖出来 Magnetic Lasso Tool, Polygonal Lasso Tool - Layer Via Copy 最后在Html上合成 xmp { white-space: pre-wrap; display: block; }

1506 次阅读|4 个评论

分享【动漫】美人如花

热度 1 天香公主 2015-2-9 06:59 PM

【动漫】美人如花用老友的创意（链接和链接），让貂婵美女转起来。 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var imageObj = new Image(); imageObj.src = 'http://yeyeclub.com/add_on/usr/data/2015/February9/40_663817.png'; function rotate() { context.clearRect(-10, -10, 20 + canvas.width, 20 + canvas.height); context.translate(canvas.width / 2, canvas.width / 2); context.rotate(Math.PI / 180); context.translate(-canvas.width / 2, -canvas.width / 2); context.drawImage(imageObj, -imageObj.width + canvas.width, 0); } setInterval(rotate, 50); 制作过程: 原图： http://www.fondosgratis.mx/imagenItem/13033/1366/928614-1024x768-0-dragon-sword-diao-chan.jpg １。首先将图片在Photoshop里打开，用Quick Selection Tool将美女部分选出（如果选了不该选的部分，用Alt点击来去掉选择），最后在上下文菜单里选择Layer Via Copy，这样美女部分就拷贝到一个新的图层了。２。在原层里将美女再度选出或部分选出，在菜单里选择Edit-Fill-Content-Aware Fill，直到美女完全消失。３。将上下两层的内容分别存为Save For Web-PNG-24文件这里要注意不要存成GIF或PNG-8，不然有条白色的边（详见这里的讨论）：４。在网页里将美女图放入画布（canvas）旋转，将背景图放入image元素，和画布重叠。代码： xmp { white-space: pre-wrap; display: block; } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var imageObj = new Image(); imageObj.src = 'http://yeyeclub.com/add_on/usr/data/2015/February9/40_663817.png'; function rotate() { context.clearRect(-10, -10, 20 + canvas.width, 20 + canvas.height); context.translate(canvas.width / 2, canvas.width / 2); context.rotate(Math.PI / 180); context.translate(-canvas.width / 2, -canvas.width / 2); context.drawImage(imageObj, -imageObj.width + canvas.width, 0); } setInterval(rotate, 50);

3258 次阅读|2 个评论

分享动漫生成器的雏形

热度 1 天香公主 2015-2-6 05:53 PM

动漫生成器的雏形前文（链接）讨论了在页面上将文字，图片，动画和音乐合成为动漫的原理。在那里有这样一个实例： xmp { white-space: pre-wrap; display: block; } Hello World Hello World 虽然代码很简单，但如果没有一个设计界面的话，我们很难将各部件放在合适的位置和选择合适的大小，可能要多次修改代码反复尝试才能得到满意的结果。本文就来探讨一下如何开发这样一个设计界面。心灵客栈网站提供的小精灵在线软件2.0版（链接）就提供了一个生成这样的动漫的所见即所得（WYSIWYG）设计界面。这个工具是基于开源软件jQuery和jQuery UI开发的，并利用了多种第三方开发的jQuery插件来提供各种专门的辅助功能, 包括设计界面上的帮助 Uploadify : 上传插件让用户将本地文件上传到心灵客栈网站 corner : 给长方形添加圆角 chromoselector : 帮助挑选颜色 knob : 旋纽 ddSlick : 下拉框 soundmanager : 帮助程序员用API来控制网页上音频和视频的播放和动漫效果的帮助 stackslider , slidesjs , sliderman , slicebox , bookblock (翻页) , gallery (图片走廊) 和 image cube (图片魔方): 各种图片滑动条和滚动方式 Fancy Music Player : 支持Html5和Flash的音乐播放器，有播放多个音乐等功能小精灵设计界面主要是应用了jQuery UI ( 链接 )提供的功能，这是一个以 jQuery 为基础的开源 JavaScript 网页用户界面代码库（百度介绍），它包含了底层用户交互、动画、特效和可更换主题的可视控件。其中的交互部件(Interactions)是一些与鼠标交互相关的内容，如 Draggable （拖动）: 允许使用鼠标移动元素 Droppable （放置）: 为可拖拽小部件创建目标 Resizable （缩放）: 使用鼠标改变元素的尺寸 Selectable （选择）: 使用鼠标选择单个元素或一组元素 Sortable （排序）: 使用鼠标调整列表中或者网格中元素的排序详见这里的介绍, 它们给动漫的互交设计界面提供了底层的支撑。下面我们也来利用jQuery UI做个最简单的设计界面, 目标是用它来产生前面的那个例子。 th, td { vertical-align: top; text-align: left; } .ui-widget-content { border: 1px solid lightgrey; background-color: transparent; background-image: none; } $(function () { testSetting(); $(".ui-widget-content") .draggable({ containment: "parent", stop: function () { refreshOutput(); } }) .resizable({ containment: "parent", stop: function () { refreshOutput(); } }) .hover( function () { $(this).css({ "border-color": "red" }); }, function () { $(this).css({ "border-color": "" }); } ); $('#imgUrl').change(function () { $('#img1').attr('src', $(this).val()); }).trigger('change'); $('#flashUrl').change(function () { setEmbedSrc($('#flash1'), $(this).val()); }).trigger('change'); $('#audioUrl').change(function () { $('#audio1').attr('src', $(this).val()); }).trigger('change'); $('#textContent').keyup(function () { $('#text1').html($(this).val().replace(/\n/g, ' ')); }).trigger('keyup'); $('#imgUrl, #flashUrl, #audioUrl, #textContent').blur(function () { refreshOutput(); }).trigger('blur'); }); function refreshOutput() { var $container = $(' '); copyStyle($('.ui-widget-content').parent(), $container, ); $('.ui-widget-content').each(function () { var $uwc = $(this).clone(); $('div', $uwc).not(':first-child').remove(); $uwc.find('*').removeAttr('class').removeAttr('id'); copyStyle($(this), $uwc.find(':first-child'), ); $container.append('\n ' + $.trim($uwc.html())); }); $('#code').text($(' ').append($container).html()); } function setEmbedSrc($f, ns) { var $nf = $f.clone().attr('src', ns); $f.replaceWith($nf); } function copyStyle($s, $t, sn) { for (var i in sn) { $t.css(sn , $s.css(sn ) || ""); } } function testSetting() { $('#imgUrl').val('http://user.sinovision.net/static/space/t2/images/header.png'); $('#flashUrl').val('http://singforjoy8.com/wizard/flash/PZ4b11ZB0h5aywRDUZiG.swf'); $('#audioUrl').val('http://yeyeclub.com/add_on/usr/data/2015/January27/56_303037.mp3'); $('#textContent').text('Hello World'); } 背景图片链接： Flash链接： MP3音乐链接：文字： Your browser does not support the audio tag. 下面是代码： th, td { vertical-align: top; text-align: left; } .ui-widget-content { border: 1px solid lightgrey; background-color: transparent; background-image: none; } $(function () { testSetting(); $(".ui-widget-content") .draggable({ containment: "parent", stop: function () { refreshOutput(); } }) .resizable({ containment: "parent", stop: function () { refreshOutput(); } }) .hover( function () { $(this).css({ "border-color": "red" }); }, function () { $(this).css({ "border-color": "" }); } ); $('#imgUrl').change(function () { $('#img1').attr('src', $(this).val()); }).trigger('change'); $('#flashUrl').change(function () { setEmbedSrc($('#flash1'), $(this).val()); }).trigger('change'); $('#audioUrl').change(function () { $('#audio1').attr('src', $(this).val()); }).trigger('change'); $('#textContent').keyup(function () { $('#text1').html($(this).val().replace(/\n/g, ' ')); }).trigger('keyup'); $('#imgUrl, #flashUrl, #audioUrl, #textContent').blur(function () { refreshOutput(); }).trigger('blur'); }); function refreshOutput() { var $container = $(' '); copyStyle($('.ui-widget-content').parent(), $container, ); $('.ui-widget-content').each(function () { var $uwc = $(this).clone(); $('div', $uwc).not(':first-child').remove(); $uwc.find('*').removeAttr('class').removeAttr('id'); copyStyle($(this), $uwc.find(':first-child'), ); $container.append('\n ' + $.trim($uwc.html())); }); $('#code').text($(' ').append($container).html()); } function setEmbedSrc($f, ns) { var $nf = $f.clone().attr('src', ns); $f.replaceWith($nf); } function copyStyle($s, $t, sn) { for (var i in sn) { $t.css(sn , $s.css(sn ) || ""); } } function testSetting() { $('#imgUrl').val('http://user.sinovision.net/static/space/t2/images/header.png'); $('#flashUrl').val('http://singforjoy8.com/wizard/flash/PZ4b11ZB0h5aywRDUZiG.swf'); $('#audioUrl').val('http://yeyeclub.com/add_on/usr/data/2015/January27/56_303037.mp3'); $('#textContent').text('Hello World'); } 背景图片链接： Flash链接： MP3音乐链接：文字： Your browser does not support the audio tag.

2240 次阅读|5 个评论

		自动登录	找回密码
密码			立即注册

标签: 动漫

相关帖子

相关日志