canvas制作倒计时炫丽效果
<!DOCTYPE html>
<head>
<title>canvas倒计时</title>
<style>
.canvas{
display: block;
border: 1px solid #000;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas class="canvas" id="canvas"></canvas>
<script>
var digit = [
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
], //
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
], //
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
], //
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
], //
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[1,1,0,0,1,1,0],
[0,0,0,1,1,1,1]
], //
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
], //
[
[0,0,0,0,1,1,1],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
], //
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
], //
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
], //
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
], //
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
] //: ]; var WINDOW_HEIGHT = 468;
var WINDOW_WIDTH = 1024;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30; //const endTime = new Date(2017,1,03,28,18,09);
var endTime = new Date();
endTime.setTime(endTime.getTime()+3600*1000);
var curShowTimeSeconds = 0; var balls = [];
var colors = ['#33B5E5','#0099CC','#AA66CC','#9933CC','#99CC00','#669900','#FF8800','FF8888','#CC0000']; window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.height = WINDOW_HEIGHT;
canvas.width = WINDOW_WIDTH; curShowTimeSeconds = getCurrentShowTimeSeconds(); setInterval(function(){
render(cxt);
update();
},50);
}
function getCurrentShowTimeSeconds(){
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round(ret/1000); return ret >=0? ret : 0;
}
function update(){ var nextShowTimeSeconds = getCurrentShowTimeSeconds(); var nextHours = parseInt(nextShowTimeSeconds / 3600);
var nextMinutes = parseInt((nextShowTimeSeconds -nextHours*3600)/ 60);
var nextSeconds = nextShowTimeSeconds % 60; var curHours = parseInt(curShowTimeSeconds / 3600);
var curMinutes = parseInt((curShowTimeSeconds -curHours*3600)/ 60);
var curSeconds = curShowTimeSeconds% 60; if(nextSeconds != curSeconds){ if(parseInt(curHours/10) != parseInt(nextHours/10)){
addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(curHours/10));
}
if(parseInt(curHours%10) != parseInt(nextHours%10)){
addBalls(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(curHours/10));
}
if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){
addBalls(MARGIN_LEFT + 39*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes/10));
}
if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){
addBalls(MARGIN_LEFT + 54*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes%10));
}
if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){
addBalls(MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds/10));
}
if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){
addBalls(MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds%10));
} curShowTimeSeconds = nextShowTimeSeconds;
} updateBalls();
}
function updateBalls(){
for(var i= 0; i< balls.length; i++){
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g; if(balls[i].y >= canvas.height -RADIUS){ balls[i].y = canvas.height - RADIUS;
balls[i].vy = -balls[i].vy*0.65; //加一个摩擦力系数
}
} var cnt = 0;
for(var i= 0; i< balls.length; i++){
if(balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH){
balls[cnt++] = balls[i];
}
}
while(balls.length > Math.min(300,cnt)){
balls.pop();
}
}
function addBalls(x, y, num){
for(var i=0; i<digit[num].length; i++){
for(var j=0; j<digit[num][i].length; j++){
if(digit[num][i][j] == 1){
var aBall = {
x: x+j*2*(RADIUS+1) +(RADIUS+1),
y: y+i*2*(RADIUS+1) +(RADIUS+1),
g: 1.5+Math.random(),
vx: Math.pow(-1, Math.ceil(Math.random()*1000))*4,
vy: -5,
color: colors[Math.floor(Math.random()*colors.length)]
}; balls.push(aBall);
}
} }
}
function render(cxt){ cxt.clearRect(0,0, WINDOW_WIDTH, WINDOW_HEIGHT); var hours = parseInt(curShowTimeSeconds / 3600);
var minutes = parseInt((curShowTimeSeconds -hours*3600)/ 60);
var seconds = curShowTimeSeconds% 60; renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), cxt);
renderDigit(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(hours%10), cxt);
renderDigit(MARGIN_LEFT+30*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10), cxt);
renderDigit(MARGIN_LEFT+54*(RADIUS+1), MARGIN_TOP, parseInt(minutes%10), cxt);
renderDigit(MARGIN_LEFT+69*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10), cxt);
renderDigit(MARGIN_LEFT+93*(RADIUS+1), MARGIN_TOP, parseInt(seconds%10), cxt); for(var i=0; i < balls.length; i++){
cxt.fillStyle = balls[i].color; cxt.beginPath();
cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2*Math.PI, true);
cxt.closePath(); cxt.fill();
}
}
function renderDigit(x,y, num, cxt){ cxt.fillStyle = 'rgb(0,102,153)'; for(var i =0; i<digit[num].length; i++){
for(var j =0; j<digit[num][i].length; j++){
if(digit[num][i][j] == 1){
cxt.beginPath();
cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1), y+i*2*(RADIUS+1)+(RADIUS+1), RADIUS, 0, 2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
</script> </body>
</html>
<!DOCTYPE html>
<head>
<title>canvas倒计时</title>
<style>
.canvas{
display: block;
border: 1px solid #000;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas class="canvas" id="canvas"></canvas> <script>
var ball = {x: 512, y:100, r:20, g:2, vx: -1, vy: 0, color: '#005588'};
window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.width = 1024;
canvas.height = 468; setInterval(function(){
render(cxt);
update();
},50);
}
function update(){
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += ball.g;
}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,canvas.height); cxt.fillStyle = ball.color;
cxt.beginPath();
cxt.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
cxt.closePath(); cxt.fill();
}
</script>
</body>
</html>
<!DOCTYPE html>
<head>
<title>canvas倒计时</title>
<style>
.canvas{
display: block;
border: 1px solid #000;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas class="canvas" id="canvas"></canvas>
<script>
var digit = [
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
], //
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
], //
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
], //
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
], //
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[1,1,0,0,1,1,0],
[0,0,0,1,1,1,1]
], //
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
], //
[
[0,0,0,0,1,1,1],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
], //
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
], //
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
], //
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
], //
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
] //: ]; var WINDOW_HEIGHT = 468;
var WINDOW_WIDTH = 1024;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30; const endTime = new Date(2017,1,03,28,18,09);
var curShowTimeSeconds = 0; window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.height = WINDOW_HEIGHT;
canvas.width = WINDOW_WIDTH; curShowTimeSeconds = getCurrentShowTimeSeconds(); setInterval(function(){
render(cxt);
update();
},50);
}
function getCurrentShowTimeSeconds(){
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round(ret/1000); return ret >=0? ret : 0;
}
function update(){ var nextShowTimeSeconds = getCurrentShowTimeSeconds(); var nextHours = parseInt(nextShowTimeSeconds / 3600);
var nextMinutes = parseInt((nextShowTimeSeconds -nextHours*3600)/ 60);
var nextSeconds = nextShowTimeSeconds % 60; var curHours = parseInt(curShowTimeSeconds / 3600);
var curMinutes = parseInt((curShowTimeSeconds -curHours*3600)/ 60);
var curSeconds = curShowTimeSeconds% 60; if(nextSeconds != curSeconds){ curShowTimeSeconds = nextShowTimeSeconds;
}
}
function render(cxt){ cxt.clearRect(0,0, WINDOW_WIDTH, WINDOW_HEIGHT); var hours = parseInt(curShowTimeSeconds / 3600);
var minutes = parseInt((curShowTimeSeconds -hours*3600)/ 60);
var seconds = curShowTimeSeconds% 60; renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), cxt);
renderDigit(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(hours%10), cxt);
renderDigit(MARGIN_LEFT+30*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10), cxt);
renderDigit(MARGIN_LEFT+54*(RADIUS+1), MARGIN_TOP, parseInt(minutes%10), cxt);
renderDigit(MARGIN_LEFT+69*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10), cxt);
renderDigit(MARGIN_LEFT+93*(RADIUS+1), MARGIN_TOP, parseInt(seconds%10), cxt);
}
function renderDigit(x,y, num, cxt){ cxt.fillStyle = 'rgb(0,102,153)'; for(var i =0; i<digit[num].length; i++){
for(var j =0; j<digit[num][i].length; j++){
if(digit[num][i][j] == 1){
cxt.beginPath();
cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1), y+i*2*(RADIUS+1)+(RADIUS+1), RADIUS, 0, 2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
</script>
<script>
var ball = {x: 512, y:100, r:20, g:2, vx: -1, vy: 0, color: '#005588'};
window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.width = 1024;
canvas.height = 468; setInterval(function(){
render(cxt);
update();
},50);
}
function update(){
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += ball.g; if(ball.y >= canvas.height -ball.r){ ball.y = canvas.height - ball.r;
ball.vy = -ball.vy*0.6; //加一个摩擦力系数
}
}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,canvas.height); cxt.fillStyle = ball.color;
cxt.beginPath();
cxt.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
cxt.closePath(); cxt.fill();
}
</script>
</body>
</html>
canvas制作倒计时炫丽效果的更多相关文章
- 酷！使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- canvas制作倒计时效果
- canvas制作的烟花效果
最近感觉canvas挺有意思的,在业余时间没事研究了一下,参考过网上一些思路,话不多说,开始啦. github地址:https://github.com/aWhiteBear/fireworks 演示 ...
- canvas实现倒计时效果示例（vue组件内编写）
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- html5 canvas 实现倒计时 功能
function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...
- 用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
- WPF设置VistualBrush的Visual属性制作图片放大镜效果
原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...
- H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
随机推荐
- springboot jpa mongodb 整合mysql Field in required a bean of type that could not be found Failed to load ApplicationContext
1.完整报错 *************************** APPLICATION FAILED TO START *************************** Descripti ...
- Docker部署MySql应用
1. MySQL部署 1.1拉取MySQL镜像 docker pull mysql 查看镜像 docker images 1.2创建MySQL容器 docker run -di --name piny ...
- 数据结构42：n个结点构造多少种树
本节要讨论的是当给定 n(n>=0)个结点时,可以构建多少种形态不同的树. 如果两棵树中各个结点的位置都一一对应,可以说这两棵树相似.如果两棵树不仅相似,而且对应结点上的数据也相同,就可以说这两 ...
- 关于logrotate工具的日志切割
logrotate是一个非常好的文件切割工具!! 具体配置如下: /var/log/debug.log{ daily ; 每天转储 rotate ...
- Qt 学习之路 2（23）：自定义事件
Qt 学习之路 2(23):自定义事件 豆子 2012年10月23日 Qt 学习之路 2 21条评论 尽管 Qt 已经提供了很多事件,但对于更加千变万化的需求来说,有限的事件都是不够的.例如, ...
- 在服务器上使用 gradle 打包 android 源码
安装 android-tools mkdir ~/android && cd ~/android wget https://dl.google.com/android/reposi ...
- 分页插件PageHelper
一.PageHelper说明 如果你也在用Mybatis,建议尝试该分页插件,这个一定是最方便使用的分页插件. 该插件目前支持Oracle,Mysql,MariaDB,SQLite,Hsqldb,Po ...
- php 伪造HTTP_REFERER页面URL来源的三种方法
php获取当前页面的前一个页面URL地址,即当前页面是从哪个页面链接过来的,可以使用$_SERVER['HTTP_REFERER']; 但是$_SERVER['HTTP_REFERER']也是可以被伪 ...
- PyCharm出现module 'matplotlib' has no attribute 'verbose'解决方案
其实不是你安装错了,也不是你代码问题,这就是PyCharm的锅! 虽然有三种解法办法,我觉得还是改IDE配置是最佳方法 把这个钩去掉就行了...... # -*- coding: utf-8 -*- ...
- http文件上传/下载
package unit; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileOutputSt ...