무료 학습 추천: 视js 비디오 튜토리얼
천 레이아웃의 첫 번째 섹션
1. 캔버스 디자인 캔버스 CSS 폴더, 새로운 스타일 만들기.
style.css 파일에 캔버스를 작성합니다.
여백 50px는 캔버스가 중앙에 있음을 의미합니다. canvas{ display: block; margin: 50px auto; box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9; }
상자 그림자 : -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9//
색상: 선택사항, 그림자 색상입니다. 설정하지 않으면 브라우저는 기본 색상인 검은색을 사용하게 되지만 기본 색상은 브라우저마다 다르므로 생략하지 않는 것이 좋습니다.
**2. 렌더링
1. 크기 디자인
섹션 2 체스판 디자인
은 14*14 직사각형 상자로 나누어져 있으며 전체 길이는 450px입니다. 450px, 양쪽에 총 15px의 공백이 있고 각 작은 직사각형 상자는 30px x 30px
2.js 코드 작성(그림)
var chess = document.getElementById('chess');var context = chess.getContext('2d');//画一个二维画布context.strokeStyle = "#BFBFBF";var drawChessBoard = function (){ for (var i=0; i<strong></strong>3. <p>섹션 3 체스 조각 디자인<strong></strong> </p><p>1. 코드 작성</p><p></p><pre class="brush:php;toolbar:false">//初始化位置数组var chessBoard = [];for(var i = 0;i<pre class="brush:php;toolbar:false">//画棋子var onstep = function (i, j, flag){//i,j代表棋子的索引位置,flag标记黑棋白棋 context.beginPath(); context.arc(15+i*30, 15+j*30, 13,0,2*Math.PI); context.closePath(); var gradient = context.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0); if(flag){//如果flag为真则黑棋 gradient.addColorStop(0, "#0A0A0A"); gradient.addColorStop(1,"#636766") }else {//白棋 gradient.addColorStop(0, "#D1D1D1"); gradient.addColorStop(1,"#F9F9F9"); } context.fillStyle=gradient; context.fill();}
//点击时触发,获得所点击的位置,然后判断该位置有没有棋子,若没有也就是if判断,调用onstep函数画黑棋(or白棋)chess.onclick = function (e){ var x = e.offsetX; var y = e.offsetY; var i = Math.floor(x/30); var j = Math.floor(y/30); if(chessBoard[i][j]==0){ onstep(i,j,flag); chessBoard[i][j] = 1; flag = !flag; }}2. 렌더링
(체스판을 무작위로 클릭하면 흑백 체스가 차례로 나타납니다)
섹션 4 배경 추가
1. 코드 작성
var pic = new Image();pic.src = "images/background.jpg";pic.onload = function (){
context.drawImage(pic, 0, 0, 450, 450);
drawChessBoard();}//注:棋盘设计中js编写最后一句可以删除了,因为在这里调用了drawChessBoard();
다음은 index.html
nbsp;html> <meta> <title>五子棋</title> <link><canvas></canvas><script></script>프로젝트 구조
에 있는 코드입니다. 일어나서 시험해 보세요!
관련 무료 학습 권장사항:
javascript
(동영상)
위 내용은 주사위 놀이 인터페이스 디자인을 구현하기 위한 JS 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!