学习日记| javaScript在网页绘制国际象棋盘

初学js，记录下学习过程。
js在网页实现的绘制国际象棋盘。

<!DOCTYPE html>
<html>
<head><title>canvastest</title>
</head>
<body><h1> canvas</h1><canvas id="canvas"width="400"height="400">  //canvas绘制画布</canvas><script>var canv=document.getElementById("canvas"); //定义画布对象canvvar ctx=canv.getContext("2d");              //设置画布为为2d//使用双层循环，绘制棋盘
for(var j=0;j<4;j++){for(var i=0;i<4;i++){//函数fillRect用来画实心方块//函数strokeRect用来画无心方框ctx.fillRect(i*80,j*80,40,40);ctx.fillRect(i*80+40,j*80+40,40,40);ctx.strokeRect(i*80+40,j*80,40,40);ctx.strokeRect(i*80,j*80+40,40,40);}
}</script>
</body>
</html>

网页显示画面

学习日记| javaScript在网页绘制国际象棋盘相关推荐

学习日记|JavaScript在网页实现的五子棋游戏
js实现的五子棋学习js的第三天,跟着老师完成的五子棋小游戏,记录学习成果欢迎大佬们一起分享经验,批评指正. 本程序主要通过三部分实现: 1.棋盘绘制 2.鼠标交互 3.输赢判断 <!DOCT ...
学习日记|javaScript在网页实现的弹球游戏
利用javeScript对象以及方法实现的网页弹球游戏. <!DOCTYPE html> <html> <head> <tilie>呼呼哈嘿的网页弹球& ...
HTML网页设计期末课程大作业：汽车网页——宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载
HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
HTML5期末大作业：运动系列——NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成
HTML5期末大作业:运动系列--NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成临近期末 ...
HTML5期末大作业：中国传统节日网页设计——端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载
HTML5期末大作业:中国传统节日网站设计--端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
前端学习之 JavaScript基础
一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
web前端期末大作业 ~我的家乡-绿城之都html+css+javascript旅游网页设计实例
web前端期末大作业 ~ 我的家乡-绿城之都html+css+javascript旅游网页设计实例临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页 ...
web课程设计网页规划与设计：网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业...
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
小白前端学习日记（一）认识前端
小白前端学习日记系列小白前端学习日记(二)HTML基础语法与标签小白前端学习日记(一)认识前端小白前端学习日记系列前言前端是什么前端所需要掌握的基本能力结构层--HTML 样式层--CS ...
前端学习记录 —— JavaScript（一）
前端学习记录 -- JavaScript(一) 前言一.初识 JavaScript JavaScript 的特点 JavaScript的作用编程语言与标记语言的区别 HTML/CSS/JS 的关系 ...

学习日记| javaScript在网页绘制国际象棋盘

学习日记| javaScript在网页绘制国际象棋盘相关推荐

最新文章

热门文章