首先，在这一周我们学习了一些关于前端的知识，有html，css，js，jquery，通过一周的学习，我学会了一些这些语言的使用 并且做了一些小东西，什么动画呀 简单画板 动态诗歌 等等，和大家分享一下。
简单画板代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单画板</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var pointing=false;
var p_x;
var p_y;
var canvas = $('#canvas')[0];
var context= canvas.getContext("2d");
context.strokeStyle= $("#color").val();
context.lineWidth=$("#range").val();
$('#canvas').mousemove(function(e){
if(pointing===true){
var x=e.pageX;
var y=e.pageY;
context.lineTo(x-canvas.offsetLeft,y-canvas.offsetTop);
context.stroke();
}
});
$('#canvas').mousedown(function(e){
pointing=true;
p_x = e.pageX;
p_y = e.pageY;
context.beginPath();
context.moveTo(p_x-canvas.offsetLeft,p_y-canvas.offsetTop);//画笔开始位置
$('#canvas').css('cursor','pointer');
});
$('#canvas').mouseup(function(){
pointing=false;
context.closePath();
$('#canvas').css('cursor','');//消除鼠标小手
});
$("#color").change(function(event) {
context.strokeStyle = $(this).val();
});
$("#range").change(function(event) {
context.lineWidth = $(this).val();
});
$('#canvas').mouseleave(function(){
pointing = false;//鼠标松开，禁止作画
context.closePath();//关闭画笔路径
$('#canvas').css('cursor','');//消除鼠标小手
});
//清空画板
$('#button').click(function() {
canvas.width=canvas.width;
canvas.height=canvas.height;
});
});
</script>
<style type="text/css">
body{
margin: 0px;
padding:0px;
}
</style>
</head>
<body>
<canvas width="800" height="600" id="canvas" style="border:5px solid black;"></canvas>
颜色：<input type="color" id="color">
<input type="button" id="button" value="清空">
粗细:<input type="range" name="number" value="9" step="3" min=0 max=50 id="range"><br/>
</body>
</html>
动态诗歌：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>写诗</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var x=50;
var w=50;
var h=50;
var id;
$(function(){
id = setInterval(write,1000);
setTimeout(stop,5000);//在多少毫秒后执行停止此方法
});
function stop() {
clearInterval(id);
};
function draw(){
var canvas =document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle="blue";
context.strokeStyle="black";
context.fillRect(x,x,w,h);
context.strokeRect(x,x,w,h);
x=x+50;
w=w+100;
h=h+100;
}
//写立体文字
function write(){
var canvas =document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "black";
context.font = "italic 60px sans-serif";
context.textBaseline = 'top';
var text4 ="静夜思";
context.fillText(text4,0,0);
context.font = "italic 40px sans-serif";
var text ="床前明月光";
var text1="疑是地上霜";
var text2="举头望丑丑";
var text3="低头思故乡";
context.strokeText(text,0,100);
context.strokeText(text1,0,200);
context.strokeText(text2,0,300);
context.strokeText(text3,0,400);
context.translate(0.5,0.5);
//设置阴影
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur =5;
}
</script>
</head>
<body>
<canvas width="800" height="800" id="canvas"></canvas>
</body>
</html>
经过这一周的学习，我发现写前端的东西特别容易看到效果，每写一行就能得到一行的效果，我觉得前端的学习很有趣，我也很享受这个过程，虽然自己还有很多不懂 ，但可以在学习的过程中寻找到快乐 这很重要。
5943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
