var example = {};
example.rotate = function (context) {
context.beginPath();
context.rotate(10*Math.PI/180);
context.rect(225, 75, 20, 10);
context.fill();
};
example.scale = function (context) {
context.beginPath();
context.rect(25, 25, 50, 50);
context.stroke();
context.scale(2,2);
context.beginPath();
context.rect(25, 25, 50, 50);
context.stroke();
};
example.reset = function (context) {
context.beginPath();
context.setFillStyle('#000000');
context.setStrokeStyle('#000000');
context.setFontSize(10);
context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)');
context.setLineCap('butt');
context.setLineJoin('miter');
context.setLineWidth(1);
context.setMiterLimit(10);
};
example.translate = function (context) {
context.beginPath();
context.rect(10, 10, 100, 50);
context.fill();
context.translate(70, 70);
context.beginPath();
context.fill();
};
example.save = function (context) {
context.beginPath();
context.setStrokeStyle('#00ff00');
context.save();
context.scale(2, 2);
context.setStrokeStyle('#ff0000');
context.rect(0, 0, 100, 100);
context.stroke();
context.restore();
context.rect(0, 0, 50, 50);
context.stroke();
};
example.restore = function (context) {
[3, 2, 1].forEach(function (item) {
context.beginPath();
context.save();
context.scale(item, item);
context.rect(10, 10, 100, 100);
context.stroke();
context.restore();
});
};
example.drawImage = function (context) {
context.drawImage('/image/wechat.png', 0, 0);
};
example.fillText = function (context) {
context.setStrokeStyle('#ff0000');
context.beginPath();
context.moveTo(0, 10);
context.lineTo(300, 10);
context.stroke();
// context.save();
// context.scale(1.5, 1.5);
// context.translate(20, 20);
context.setFontSize(10);
context.fillText('Hello World', 0, 30);
context.setFontSize(20);
context.fillText('Hello World', 100, 30);
// context.restore();
context.beginPath();
context.moveTo(0, 30);
context.lineTo(300, 30);
context.stroke();
};
example.fill = function (context) {
context.beginPath();
context.rect(20, 20, 150, 100);
context.setStrokeStyle('#00ff00');
context.fill();
};
example.stroke = function (context) {
context.beginPath();
context.moveTo(20, 20);
context.lineTo(20, 100);
context.lineTo(70, 100);
context.setStrokeStyle('#00ff00');
context.stroke();
};
example.clearRect = function (context) {
context.setFillStyle('#ff0000');
context.beginPath();
context.rect(0, 0, 300, 150);
context.fill();
context.clearRect(20, 20, 100, 50);
};
example.beginPath = function (context) {
context.beginPath();
context.setLineWidth(5);
context.setStrokeStyle('#ff0000');
context.moveTo(0, 75);
context.lineTo(250, 75);
context.stroke();
context.beginPath();
context.setStrokeStyle('#0000ff');
context.moveTo(50, 0);
context.lineTo(150, 130);
context.stroke();
};
example.closePath = function (context) {
context.beginPath();
context.moveTo(20, 20);
context.lineTo(20, 100);
context.lineTo(70, 100);
context.closePath();
context.stroke();
};
example.moveTo = function (context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(300, 150);
context.stroke();
};
example.lineTo = function (context) {
context.beginPath();
context.moveTo(20,20);
context.lineTo(20,100);
context.lineTo(70,100);
context.stroke();
};
example.rect = function (context) {
context.beginPath();
context.rect(20, 20, 150, 100);
context.stroke();
};
example.arc = function (context) {
context.beginPath();
context.arc(75,75,50,0,Math.PI*2,true);
context.moveTo(110,75);
context.arc(75,75,35,0,Math.PI,false);
context.moveTo(65,65);
context.arc(60,65,5,0,Math.PI*2,true);
context.moveTo(95,65);
context.arc(90,65,5,0,Math.PI*2,true);
context.stroke();
};
example.quadraticCurveTo = function (context) {
context.beginPath();
context.moveTo(20, 20);
context.quadraticCurveTo(20, 100, 200, 20);
context.stroke();
};
example.bezierCurveTo = function (context) {
context.beginPath();
context.moveTo(20, 20);
context.bezierCurveTo(20, 100, 200, 100, 200, 20);
context.stroke();
};
example.setFillStyle = function (context) {
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
context.setFillStyle(item);
context.beginPath();
context.rect(0 + 75*index, 0, 50, 50);
context.fill();
});
};
example.setStrokeStyle = function (context) {
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
context.setStrokeStyle(item);
context.beginPath();
context.rect(0 + 75*index, 0, 50, 50);
context.stroke();
});
};
example.setGlobalAlpha = function (context) {
context.setFillStyle('#000000');
[1, 0.5, 0.1].forEach(function (item, index) {
context.setGlobalAlpha(item)
context.beginPath();
context.rect(0 + 75*index, 0, 50, 50);
context.fill();
});
}
example.setShadow = function (context) {
context.beginPath();
context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)');
context.rect(10, 10, 100, 100);
context.fill();
};
example.setFontSize = function (context) {
[10, 20, 30, 40].forEach(function (item, index) {
context.setFontSize(item);
context.fillText('Hello, world', 20, 20 + 40*index);
})
};
example.setLineCap = function (context) {
context.setLineWidth(10);
['butt', 'round', 'square'].forEach(function (item, index) {
context.beginPath();
context.setLineCap(item);
context.moveTo(20, 20 + 20*index);
context.lineTo(100, 20 + 20*index);
context.stroke();
});
};
example.setLineJoin = function (context) {
context.setLineWidth(10);
['bevel', 'round', 'miter'].forEach(function (item, index) {
context.beginPath();
context.setLineJoin(item);
context.moveTo(20 + 80*index, 20);
context.lineTo(100 + 80*index, 50);
context.lineTo(20 + 80*index, 100);
context.stroke();
});
};
example.setLineWidth = function (context) {
[2, 4, 6, 8, 10].forEach(function (item, index) {
context.beginPath();
context.setLineWidth(item);
context.moveTo(20, 20 + 20*index);
context.lineTo(100, 20 + 20*index);
context.stroke();
});
};
example.setMiterLimit = function (context) {
context.setLineWidth(4);
[2, 4, 6, 8, 10].forEach(function (item, index) {
context.beginPath();
context.setMiterLimit(item);
context.moveTo(20 + 80*index, 20);
context.lineTo(100 + 80*index, 50);
context.lineTo(20 + 80*index, 100);
context.stroke();
});
};
module.exports = example
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序源码 视觉吸引力提升 - 轮播图变换效果组件下载
共261个文件
js:60个
wxml:59个
wxss:57个
需积分: 1 0 下载量 62 浏览量
2024-05-22
17:56:33
上传
评论
收藏 181KB ZIP 举报
温馨提示
轮播图变换效果组件是一款专为提升网页和应用视觉吸引力而设计的前端UI资源。它通过多种创新的轮播图变换动画,为用户带来独特的浏览体验。以下是该组件的主要特色: 多样化动画效果:提供多种轮播动画效果,如淡入淡出、推移、翻转等,增加视觉趣味性。 自定义动画:支持开发者自定义动画效果,满足个性化设计需求。 响应式布局:确保在手机、平板和桌面等不同设备上均能完美展示。 性能优化:优化的代码实现,保证轮播图的流畅运行,不影响页面加载速度。 易于集成:简单的API和清晰的文档,便于快速集成到现有的项目中。 交互性强:支持触摸和鼠标操作,提升用户交互体验。 SEO友好:考虑搜索引擎优化,确保轮播内容能被正确索引。 数据缓存:智能缓存机制,减少服务器请求,加快页面响应速度。 多场景适用:适用于产品展示、新闻发布、广告推广等多种场景。 轮播图变换效果组件是前端开发者和网页设计师提升网站用户体验和视觉表现力的有力工具。立即下载,让您的网站或应用界面动起来,吸引更多访客的目光。
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序源码 视觉吸引力提升 - 轮播图变换效果组件下载 (261个子文件)
.gitignore 8B
1.jpg 7KB
2.jpg 7KB
example.js 7KB
index.js 4KB
background-audio.js 2KB
voice.js 2KB
animation.js 2KB
on-accelerometer-change.js 2KB
storage.js 2KB
index.js 1KB
label.js 1KB
file.js 1KB
image.js 1KB
video.js 1KB
canvas.js 1KB
input.js 899B
button.js 805B
app.js 718B
canvas.js 716B
swiper.js 679B
scroll-view.js 664B
form.js 647B
index.js 604B
get-user-info.js 602B
action-sheet.js 576B
slide-tab.js 536B
map.js 530B
audio.js 497B
picker.js 481B
toast.js 467B
get-location.js 455B
text.js 451B
get-network-type.js 450B
checkbox.js 410B
modal.js 407B
radio.js 404B
icon.js 394B
util.js 394B
login.js 365B
loading.js 312B
video.js 301B
open-location.js 282B
format-location.js 259B
pull-down-refresh.js 254B
get-system-info.js 251B
slider.js 249B
switch.js 239B
navigator.js 216B
on-compass-change.js 211B
navigation-bar-loading.js 171B
set-navigation-bar-title.js 171B
navigate.js 122B
redirect.js 122B
image.js 10B
request-payment.js 10B
progress.js 9B
view.js 9B
upload-file.js 9B
web-socket.js 9B
request.js 9B
download-file.js 9B
navigator.js 8B
app.json 3KB
pull-down-refresh.json 84B
on-accelerometer-change.json 61B
get-network-type.json 61B
get-system-info.json 61B
navigation-bar-loading.json 58B
video.json 56B
on-compass-change.json 55B
get-user-info.json 55B
set-navigation-bar-title.json 55B
canvas.json 49B
navigator.json 49B
get-location.json 49B
request-payment.json 49B
upload-file.json 49B
open-location.json 49B
storage.json 49B
request.json 49B
download-file.json 49B
login.json 49B
background-audio.json 48B
web-socket.json 47B
canvas.json 43B
map.json 43B
file.json 43B
image.json 43B
voice.json 43B
animation.json 43B
progress.json 2B
loading.json 2B
image.json 2B
navigator.json 2B
navigate.json 2B
redirect.json 2B
toast.json 2B
input.json 2B
swiper.json 2B
共 261 条
- 1
- 2
- 3
资源评论
Layla_c
- 粉丝: 1204
- 资源: 198
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功