关于前端一周知识的总结

首先，在这一周我们学习了一些关于前端的知识，有html，css，js，jquery，通过一周的学习，我学会了一些这些语言的使用并且做了一些小东西，什么动画呀简单画板动态诗歌等等，和大家分享一下。

简单画板代码：

<!doctype html>

<head>

$(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>

body{

margin: 0px;

padding:0px;

}

</style>

</head>

<body>

颜色：<input type="color" id="color">

粗细:<input type="range" name="number" value="9" step="3" min=0 max=50 id="range"><br/>

</body>

</html>

动态诗歌：

<!doctype html>

<head>

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>

</body>

</html>

经过这一周的学习，我发现写前端的东西特别容易看到效果，每写一行就能得到一行的效果，我觉得前端的学习很有趣，我也很享受这个过程，虽然自己还有很多不懂，但可以在学习的过程中寻找到快乐这很重要。

关于前端一周知识的总结相关推荐

前端Base64编码知识,一文打尽
原文: https://juejin.cn/post/6989391487200919566 作者: 云的世界掘金专栏: 前端基础进阶健康满分关注并将「趣谈前端」设为星标每天定时分享技术干货/ ...
2019-2020-3 《Java 程序设计》第三周知识总结
2019-2020-3 <Java 程序设计>第三周知识总结 1.类的定义语法格式如下(加[]表示可选项): [修饰符] class 类名 { 属性定义(声明) 方法定义(声明)} 2. ...
网站前端开发基础知识学什么？必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
前端工程师考核总结_最新前端工程师周工作总结
前端工程师周工作总结转眼一周的时间过去了,回想一下这一周做的工作,在保证效率的同时也仍然存在着一些小的问题,现在总结如下. 第一,在工作的时候还是有点急于求成.这一周在写页面的时候遇到了一个小问 ...
web前端开发三个阶段和三要素，学前端必备基础知识
web前端开发三个阶段和三要素是什么?下面就跟着小编一起来看看吧! Web前端市场前景广阔,吸引了很多人涌入学习,但无论是零基础小白,亦或是想要进阶深造的程序员,前端开发三个阶段和三要素都是他们必学的 ...
web前端开发基础知识_薪资30K+的web前端怎么做到的？
好的web前端年薪会有多少?首先,我们要知道怎么才能成为一个所认为的"好的web前端",其次,自己能值多少价值? 用户体验为王,是互联网时代的座右铭.人们在享受互联网带来的便捷的同 ...
蓝旭前端第二周预习———HTML标签+如何查看控制台
蓝旭前端第二周预习---HTML标签+如何查看控制台 HTML标签文档文档生成文档结构标签标签语法基本标签如何查看控制台(chrome) HTML标签文档文档生成 VScode中&q ...
前端开发核心知识进阶
课程内容开篇词:如何突破前端开发技术瓶颈日本后现代主义作家村上春树写过一本富有哲理的书--<当我谈跑步时我谈些什么>. 书中,他谈到,跑步跟写作一样:都需要坚毅隐忍,追逐超越:都需要心 ...
前端实习生面试知识补习
最全前端面试问题及答案总结: https://www.cnblogs.com/autismtune/p/5210116.html 百度前端实习生面试经历转载:https://www.cnblogs. ...

关于前端一周知识的总结

关于前端一周知识的总结相关推荐

最新文章

热门文章