html画布创建黑白象棋棋盘,HTML5学习与加固——canvas绘图象棋盘
1
2
3
4
5
6
canvas绘图_象棋盘
7
8
9
10 不支持Canvas
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 varobject={28 //初始化
29 init:function() {30 //棋盘外框
31 varcanvas1=document.getElementById("canvas1");32 this.ctx=canvas1.getContext("2d");33 this.ctx.lineWidth= 5;34 this.ctx.strokeStyle= "brown";35 this.ctx.strokeRect(100,100,800,900);36
37 this.row();38 this.cols();39 this.drawFont();40 //注意:现在的原点中心为(100,100),所以下面的所有坐标在原来的基础上加(x+100,y+100);
41 //中心点一(1000,200)
42 this.center(200,300);43 //中心点二(700,200)
44 this.center(800,300);45 //中心点三(5,300)
46 this.center(105,400);47 //中心点四(200,300)
48 this.center(300,400);49 //中心点五(400,300)
50 this.center(500,400);51 //中心点六(600,300)
52 this.center(700,400);53 //中心点七(800,300)
54 this.center(900,400);55 //中心点八(800,600)
56 this.center(900,700);57 //中心点九(600,600)
58 this.center(700,700);59 //中心点十(400,600)
60 this.center(500,700);61 //中心点十一(200,600)
62 this.center(300,700);63 //中心点十二(5,600)
64 this.center(105,700);65 //中心点十三(700,700)
66 this.center(800,800);67 //中心点十四(100,700)
68 this.center(200,800);69
70 //必须当页面中的图片资源加载成功,再画棋子
71 window.οnlοad= function() {72 //棋子图片
73 varju=document.getElementById("ju");74 varma=document.getElementById("ma");75 varxiang=document.getElementById("xiang");76 varshi=document.getElementById("shi");77 varjiang=document.getElementById("jiang");78 varbing=document.getElementById("bing");79 varpao=document.getElementById("pao");80
81 varr_ju=document.getElementById("r_ju");82 varr_ma=document.getElementById("r_ma");83 varr_xiang=document.getElementById("r_xiang");84 varr_shi=document.getElementById("r_shi");85 varr_jiang=document.getElementById("r_jiang");86 varr_bing=document.getElementById("r_bing");87 varr_pao=document.getElementById("r_pao");88 //将棋子图像绘制到画布上
89 object.ctx.drawImage(ju,50,50,100,100);90 object.ctx.drawImage(ma,150,50,100,100);91 object.ctx.drawImage(xiang,250,50,100,100);92 object.ctx.drawImage(shi,350,50,100,100);93 object.ctx.drawImage(jiang,450,50,100,100);94 object.ctx.drawImage(shi,550,50,100,100);95 object.ctx.drawImage(xiang,650,50,100,100);96 object.ctx.drawImage(ma,750,50,100,100);97 object.ctx.drawImage(ju,850,50,100,100);98 object.ctx.drawImage(pao,150,250,100,100);99 object.ctx.drawImage(pao,750,250,100,100);100 object.ctx.drawImage(bing,50,350,100,100);101 object.ctx.drawImage(bing,250,350,100,100);102 object.ctx.drawImage(bing,450,350,100,100);103 object.ctx.drawImage(bing,650,350,100,100);104 object.ctx.drawImage(bing,850,350,100,100);105
106 object.ctx.drawImage(r_ju,50,950,100,100);107 object.ctx.drawImage(r_ma,150,950,100,100);108 object.ctx.drawImage(r_xiang,250,950,100,100);109 object.ctx.drawImage(r_shi,350,950,100,100);110 object.ctx.drawImage(r_jiang,450,950,100,100);111 object.ctx.drawImage(r_shi,550,950,100,100);112 object.ctx.drawImage(r_xiang,650,950,100,100);113 object.ctx.drawImage(r_ma,750,950,100,100);114 object.ctx.drawImage(r_ju,850,950,100,100);115 object.ctx.drawImage(r_pao,150,750,100,100);116 object.ctx.drawImage(r_pao,750,750,100,100);117 object.ctx.drawImage(r_bing,50,650,100,100);118 object.ctx.drawImage(r_bing,250,650,100,100);119 object.ctx.drawImage(r_bing,450,650,100,100);120 object.ctx.drawImage(r_bing,650,650,100,100);121 object.ctx.drawImage(r_bing,850,650,100,100);122
123 }124 },125 //此方法用来画棋盘线
126 LineDrawing:function(mx, my, lx, ly) {127 this.ctx.beginPath();128 this.ctx.moveTo(mx, my);129 this.ctx.lineTo(lx, ly);130 this.ctx.stroke();131 },132 //棋盘行
133 row:function() {134 for(vari= 200; i<= 900; i+= 100) {135 this.ctx.beginPath();136 this.ctx.moveTo(105, i);137 this.ctx.lineTo(900, i);138 this.ctx.stroke();139 }140 },141 //棋盘列
142 cols:function() {143 for(vari= 200; i<= 800; i+= 100) {144 this.ctx.beginPath();145 this.ctx.moveTo(i,105);146 this.ctx.lineTo(i,1000);147 this.ctx.stroke();148 }149 //清除指定的矩形区域
150 //this.ctx.clearRect(5, 402,795, 95);
151 this.ctx.clearRect(102.5,502,795,95);152 //斜线
153 this.LineDrawing(400,105,600,300);154 this.LineDrawing(400,805,600,1000);155 //反斜线
156 this.LineDrawing(600,105,400,300);157 this.LineDrawing(600,805,400,1000);158 },159 //坐标的中心点
160 center:function(x, y) {161 this.ctx.lineWidth= 5;162 //中心点一(100,200)
163 //左上
164 this.LineDrawing(x- 10, y- 30, x- 10, y- 10);165 this.LineDrawing(x- 10, y- 10, x- 30, y- 10);166 //右上
167 this.LineDrawing(x+ 10, y- 30, x+ 10, y- 10);168 this.LineDrawing(x+ 10, y- 10, x+ 30, y- 10);169 //左下
170 this.LineDrawing(x- 10, y+ 30, x- 10, y+ 10);171 this.LineDrawing(x- 10, y+ 10, x- 30, y+ 10);172 //右下
173 this.LineDrawing(x+ 10, y+ 30, x+ 10, y+ 10);174 this.LineDrawing(x+ 10, y+ 10, x+ 30, y+ 10);175 },176 drawFont:function() {177 this.ctx.lineWidth= 1;178 //绘制文字
179 this.ctx.font= "60px microsoft yahei";180 this.ctx.save();//保存点
181 //将坐标中心作为起启点
182 this.ctx.translate(canvas1.width/ 2, canvas1.height/ 2);183 varradian=Math.PI/ 2;//弧度制 Math.PI=π
184 this.ctx.rotate(radian);//旋转画布绘制刻度
185 //填充
186 this.ctx.fillText("楚",-30,-270);187 this.ctx.fillText("河",-30,-150);188 this.ctx.restore();//恢复到保存点
189 this.ctx.save();190 //将坐标中心作为起点
191 this.ctx.translate(canvas1.width/ 2, canvas1.height/ 2);192 varradian=Math.PI/ -2;193 this.ctx.rotate(radian);194 this.ctx.fillText("汉",-30,-270);195 this.ctx.fillText("界",-30,-150);196 this.ctx.restore();197 }198 };199 object.init();200
201
202
203
html画布创建黑白象棋棋盘,HTML5学习与加固——canvas绘图象棋盘相关推荐
- html画布创建黑白象棋棋盘,Canvas绘制象棋棋盘
学习Canvas可以通过一些例子来增加成就感 一下是一个输出一个象棋棋盘的例子 象棋棋盘 //以要画的点为原点定义四个象限 var pointDefine=[[-1,-1],[1,-1],[-1,1] ...
- h5学习笔记之canvas绘图(1)
一.canvas标签的说明 在设置cancas大小的时候,必须在标签内写,如果在css内写会发生变化 默认宽度300px,默认高度 150px 背景颜色红色 的一个长方形 <canvas wid ...
- HTML5css3学习总结(4)canvas绘图
canvas HTML5 重中之重 canvas是HTML5中的重点:今天简单的学习了一下,总结一下canvas的概念:canvas是要有面向对象的思维:各个标签就像我们画水彩画一样,需要注意标签使用 ...
- 画布式编程_构建HTML5画布游戏如何帮助我学习编程
画布式编程 by Surbhi Oberoi 由Surbhi Oberoi 构建HTML5画布游戏如何帮助我学习编程 (How building HTML5 canvas games helped m ...
- 菜鸟教程之html5学习,Canvas画布、渐变,数学公式、符号的书写
html5元素及功能: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等 HTML5新元素 <canvas> ...
- Python利用cv2创建10*10象棋棋盘图片
Python利用cv2创建10*10象棋棋盘,棋盘大小为500*500 import cv2 import numpy img = numpy.zeros((500, 500), dtype=nump ...
- HTML5 学习总结(四)——canvas绘图、WebGL、SVG
目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...
- HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识 标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读 评论(0) 收藏 举报 分类: JavaScr ...
- HTML5学习笔记(一):HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
最新文章
- Error:java: Compilation failed: internal java compiler
- 什么样的鼠标对程序员最有用,超级提高开发效率
- Broadcast简单使用
- 淘宝网物流宝平台11日上线 全面开放API接口
- 如何使用Guitar Pro在乐谱播放时切换效果器音色?
- Leetcode 627. Swap Salary
- diskgenius创建efi分区_怎么创建efi系统分区?efi系统分区创建教程
- 【备忘】LAMP兄弟连李明老师讲Linux[更新完毕-共享完毕]
- 教你查看网页的记住密码和免费下载付费音乐
- python3出现TypeError: can only concatenate str (not bytes) to str的错误,大一刚上手python的学习,望大神解决。感激不尽
- 《Multiobjective Evolutionary Algorithms:A Comparative Case Study and the Strength Pareto Approach》
- 计算机如何打开office,win10电脑没有office软件如何打开ppt文档
- 微信摇一摇周边--获取access_token
- 淘宝产品,为什么转化率还是这么低?
- 【ggplot】复杂柱状图:自定义颜色、标签、位置、坐标轴和主题
- 职场礼仪之西装十大禁忌
- php 支付宝用户信息授权,支付宝 app应用 授权 php + APICloud
- OSI 七层网络结构
- xjoi1.4行李托运
- 前端 300题 —— 牛客网
热门文章
- 通过希网获取公网ip
- TCL:不断扩张的业务,不断下跌的股价
- 音质比较好的蓝牙耳机有哪些?四款音质好的蓝牙耳机推荐
- 文献管理软件zotero与xodo联动
- (转)Ubuntu 17.04_64上搭建巡风扫描系统(资产信息漏洞扫描内网神器)
- 【分享】“明道云“ 在集简云平台集成应用的常见问题与解决方案
- 「crontab」- 周期任务的配置文件 @20210308
- 由蓝眼睛岛问题引发的思考
- 文库自由复制(纯文本)
- 计算机启动显示器发白,电脑刚开机的时候显示器发白,过一段时间就没事了,怎么回事?...