<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js/lufylegend-1.9.9.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"
type="text/css"></link>
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"
type="text/css"></link>
<title>画图</title>
<script type="text/javascript">
//使用库件内置的init方法进行初始化
// 50:游戏速度设定
// “myledend”,传入div的ID,库件初始化会将Canvas加入到此div内部
//500:canvas的宽
//600:canvas的高
//main:游戏初始化完成后,调用此函数
init(100, "mylegend", 1200, 1200, main);
var loader;//加载器
var bitmap;//存储图片对象
var layer;//层对象
var bitmapdata;
var field;
function main() {
// LGlobal.setDebug(false);
//创建加载对象
loader = new LLoader();
layer = new LSprite();//创建层
loader.addEventListener(LEvent.COMPLETE, loadBitmadata);//给loader添加onload事件
loader.load("girl1.jpg", 'bitmapData');//载图加片
bitmapdata = new LBitmapData(loader.content);//保存和读取image对象
layer.graphics.beginBitmapFill(bitmapdata);
bitmap = new LBitmap(bitmapdata);//将image对象显示到Canvas
addChild(layer);
layer.addChild(bitmap);
field=new LTextField();
field.x=50;
field.y=50;
field.setType(LTextFieldType.INPUT);
layer.addChild(field);
LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_DOWN, translate);
var canvas = document.getElementById("mylegend");
canvas.style.marginLeft = "100px";
var canvas = document.getElementById("mylegend");
canvas.style.marginTop = "50px";
bitmap.paddingTop="100px";
}
//显示图片
function loadBitmadata(event) {
layer.x = 100;//图片坐标
layer.y =20;//图片坐标
}
//剪切
function cutPicture() {
var alpha = document.getElementById("alphainput");
alpha.style.display = "none";
var chanageSize = document.getElementById("chanageSizeinput");
chanageSize.style.display = "none";
var rotate = document.getElementById("rotateinput");
rotate.style.display = "none";
var cut = document.getElementById("cutinput");
cut.style.display = "";
var text = document.getElementById("textinput");
text.style.display = "none";
var x = document.getElementById('xchange').value;
var y = document.getElementById('ychange').value;
var width = document.getElementById('wchange').value;
var heigth = document.getElementById('hchange').value;
//layer层
/* layer.x = x;
layer.y = y;
layer.width = width;
layer.height = heigth;*/
//图片
bitmapdata.x = x;
bitmapdata.y = y;
bitmapdata.width = width;
bitmapdata.height = heigth;
}
//旋转
function rotatePicture() {
var alpha = document.getElementById("alphainput");
alpha.style.display = "none";
var chanageSize = document.getElementById("chanageSizeinput");
chanageSize.style.display = "none";
var rotate = document.getElementById("rotateinput");
rotate.style.display = "";
var cut = document.getElementById("cutinput");
cut.style.display = "none";
var text = document.getElementById("textinput");
text.style.display = "none";
var value = document.getElementById('range').value;
var angle=45*Math.PI/180;
var x=bitmap.x;
var y=bitmap.y;
var width=bitmap.width;
//bitmapdata.translate(20,20);
bitmap.rotate= value;//旋转角度60
}
//改变透明度
function alphaPicture() {
var alpha = document.getElementById("alphainput");
alpha.style.display = "";
var chanageSize = document.getElementById("chanageSizeinput");
chanageSize.style.display = "none";
var rotate = document.getElementById("rotateinput");
rotate.style.display = "none";
var cut = document.getElementById("cutinput");
cut.style.display = "none";
var text = document.getElementById("textinput");
text.style.display = "none";
var value = document.getElementById('alphachange').value;
layer.alpha = value;//透明度
}
//改变图片缩放
function chanageSizePicture() {
var alpha = document.getElementById("alphainput");
alpha.style.display = "none";
var chanageSize = document.getElementById("chanageSizeinput");
chanageSize.style.display = "";
var rotate = document.getElementById("rotateinput");
rotate.style.display = "none";
var cut = document.getElementById("cutinput");
cut.style.display = "none";
var text = document.getElementById("textinput");
text.style.display = "none";
var valueX = document.getElementById('widthchange').value;
var valueY = document.getElementById('heightchange').value;
layer.scaleX = valueX;
layer.scaleY = valueY;
}
//改变文字
function changetext()
{
var alpha = document.getElementById("alphainput");
alpha.style.display = "none";
var chanageSize = document.getElementById("chanageSizeinput");
chanageSize.style.display = "none";
var rotate = document.getElementById("rotateinput");
rotate.style.display = "none";
var cut = document.getElementById("cutinput");
cut.style.display = "none";
var text = document.getElementById("textinput");
text.style.display = "";
}
//平移
function translate(event) {
//往左移
if (event.keyCode == 37) {
if (layer.x > 0)
layer.x = layer.x - 1;
}
//往右移
if (event.keyCode == 39) {
if (layer.x + bitmap.width < 800)
layer.x = layer.x + 1;
}
//往上移
if (event.keyCode == 38) {
if (layer.y>bitmap.y)//图片的y坐标要小于canvas的y坐标
layer.y = layer.y - 1;
}
//往下移
if (event.keyCode == 40) {
if (layer.y + bitmap.height < 600)
layer.y = layer.y + 1;
}
}
function doOriginal() {
//将原图片清除清除
removeChild(layer);
//创建加载对象
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE, original);//给loader添加onload事件
loader.load(imageurl, "bitmapDat
没有合适的资源?快使用搜索试试~ 我知道了~
csnvas在线画图及图片处理工具
共440个文件
png:146个
js:122个
css:71个
5星 · 超过95%的资源 需积分: 11 40 下载量 173 浏览量
2016-06-11
06:35:50
上传
评论
收藏 9.19MB ZIP 举报
温馨提示
这是基于HTML5的Canvas而实现的在线画图及简单图片处理的工具。主要功能包括:画图、颜色反转、转灰度图、阴影效果、横向渐变、纵向渐变等。不过,由于花的时间不多,没能深一步完善,不足之处还请见谅
资源推荐
资源详情
资源评论
收起资源包目录
csnvas在线画图及图片处理工具 (440个子文件)
bootstrap.css 144KB
bootstrap.min.css 120KB
bootstrap.min.css 103KB
style.css 103KB
animate.css 60KB
glyphicons.css 52KB
font-awesome.css 27KB
bootstrap-theme.css 26KB
bootstrap-theme.min.css 23KB
font-awesome.min.css 21KB
plugins.css 21KB
halflings.css 20KB
bootstrap-responsive.min.css 16KB
datepicker.css 16KB
select2_metro.css 14KB
style-metro.css 14KB
datetimepicker.css 12KB
chosen.css 12KB
fullcalendar.css 11KB
uniform.default.css 11KB
dropzone.css 10KB
style-responsive.css 9KB
light.css 9KB
inbox.css 9KB
purple.css 7KB
brown.css 7KB
blue.css 7KB
grey.css 7KB
default.css 7KB
pricing-tables.css 7KB
timeline.css 6KB
bootstrap-toggle-buttons.css 6KB
clockface.css 6KB
search.css 6KB
main.css 5KB
profile.css 5KB
bootstrap-modal.css 4KB
daterangepicker.css 4KB
jquery.fancybox.css 4KB
DT_bootstrap.css 4KB
jquery.nestable.css 3KB
blog.css 2KB
login.css 2KB
login-soft.css 2KB
bootstrap-wysihtml5.css 2KB
colorpicker.css 2KB
bootstrap-fileupload.css 2KB
bootstrap-tag.css 2KB
style-non-responsive.css 2KB
error.css 2KB
news.css 2KB
multi-select-metro.css 2KB
lock.css 2KB
jquery.gritter.css 2KB
timepicker.css 2KB
coming-soon.css 2KB
jquery.fileupload-ui.css 1KB
bootstrap-tree.css 1KB
jqvmap.css 907B
jquery.tagsinput.css 904B
promo.css 770B
email.css 708B
invoice.css 566B
jquery.rater.css 507B
print.css 362B
about-us.css 286B
jquery.easy-pie-chart.css 141B
jquery-ui-1.10.1.custom.min.css 0B
bootstrap-responsive1.min.css 0B
css 0B
jquery.ui.slider.css 0B
glyphicons-regular.eot 143KB
fontawesome-webfont.eot 37KB
glyphiconshalflings-regular.eot 33KB
glyphicons-halflings-regular.eot 20KB
ajax-loading.gif 29KB
fancybox_loading.gif 4KB
progressbar.gif 3KB
loading.gif 3KB
select2-spinner.gif 2KB
animated-overlay.gif 2KB
star.gif 1KB
ie-spacer.gif 43B
blank.gif 43B
.gitignore 0B
new.html 16KB
Image.html 10KB
favicon.ico 569B
huatu3.iml 335B
huatu.iml 335B
image4.jpg 490KB
girl.jpg 393KB
image2.jpg 373KB
image3.jpg 340KB
item_img.jpg 293KB
image1.jpg 246KB
item_img1.jpg 244KB
face.jpg 169KB
image5.jpg 117KB
earth.jpg 116KB
共 440 条
- 1
- 2
- 3
- 4
- 5
资源评论
- toskeyjohn2019-06-13实在太好用啦
梁植淋
- 粉丝: 20
- 资源: 7
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 全卷积网络基于voc2012数据集简单pytorch实现
- pycharm的一些介绍-用于更好的学习python
- 基于C++的程序设计大赛天梯赛L2答案(天梯赛)
- 基于python实现的三次样条插值和均值插值法实现
- Python语言教程2-python批量图片大小处理-多文件夹
- Python语言教程1-python批量图片重命名,将后缀某几个不想要的字去除
- Space Combat Kit 太空战斗套件Unity游戏开发插件资源unitypackage C#
- Universal Device Preview 通用设备预览Unity游戏开发插件资源unitypackage
- Paladin Anim Set 圣骑士动画集Unity游戏动作动画插件资源unitypackage
- 计算机财务管理期末考报表部分题目及答案.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功