js实现canvas皇家斯图尔特格子背景效果代码
代码语言:html
所属分类:背景
代码描述:js实现canvas皇家斯图尔特格子背景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin:0; background:#034710; } #cvs { border:solid black 4px; border-radius:12px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } </style> </head> <body > <canvas id="cvs" width="599" height="599"></canvas> <script > let ctx const SQUARE_SIZE = 599 const MAIN_COLOR = '#AB0303' const RED_WEAVE_COLOR = '#810303' const BLUE_WEAVE_COLOR = '#2C215E' const BLACK_WEAVE_COLOR = '#150B0B' const YELLOW_WEAVE_COLOR = '#AB8D03' const WHITE_WEAVE_COLOR = '#B9B9B9' const GREEN_WEAVE_COLOR = '#094710' const BLUE_BK_COLOR = '#25256D' const BLACK_BK_COLOR = '#0C0C0C' const GREEN_BK_COLOR = '#035613' const YELLOW_BK_COLOR = '#C3A103' const YELLOW_BK_WEAVE_COLOR = '#987E03' const WHITE_BK_COLOR = '#D4D4D4' const WHITE_BK_WEAVE_COLOR = '#A1A1A1' function drawTartan() { const cvsNd = document.getElementById("cvs") ctx = cvsNd.getContext('2d') solidWeave({x:0,y:0,w:SQUARE_SIZE,h:SQUARE_SIZE,c:MAIN_COLOR,wc:RED_WEAVE_COLOR}) let nNewY = 0 let nWidth = 72 let nNewX = 0 gapRow({y:nNewY,h:72}) nNewY = 180 gapRow({y:nNewY,h:20}) nNewY = nNewY + 26 gapRow({y:nNewY,h:8}) nNewY = nNewY + 16 gapRow({y:nNewY,h:8}) nNewY = nNewY + 16 gapRow({y:nNewY,h:20}) nNewY = nNewY + 130 gapRow({y:nNewY,h:152}) // *** nNewX=0 nNewY=0 nNewY = 72 regRow({y:nNewY,h:18,c:BLUE_WEAVE_COLOR,bgc:BLUE_BK_COLOR}) nNewY=nNewY+18 regRow({y:nNewY,h:24,c:BLACK_WEAVE_COLOR,bgc:BLACK_BK_COLOR}) nNewY=nNewY+24 regRow({y:nNewY,h:8,c:YELLOW_WEAVE_COLOR}) nNewY=nNewY+8 regRow({y:nNewY,h:8,c:BLACK_WEAVE_COLOR,bgc:BLACK_BK_COLOR}) nNewY=nNewY+8 regRow({y:nNewY,h:8,c:WHITE_WEAVE_COLOR,bgc:BLUE_BK_COLOR}) nNewY=nNewY+8 regRow({y:nNewY,h:8,c:BLACK_WEAVE_COLOR,bgc:BLACK_BK_COLOR}) nNewY=nNewY+8 regRow({y:nNewY,h:34,c:GREEN_WEAVE_COLOR,bgc:BLUE_BK_COLOR}) nNewY=nNewY+34 nNewY=nNewY+18 regRow({y:nNewY,h:8,c:BLACK_WEAVE_COLOR,bgc:BLACK_BK_COLOR}) nNewY=nNewY+8 nNewY=nNewY+8 regRow({y:nNewY,h:9,c:WHITE_WEAVE_COLOR,bgc:BLUE_BK_COLOR}) nNewY=nNewY+9 nNewY=nNewY+8 regRow({y:nNewY,h:8,c:BLACK_WEAVE_COLOR,bgc:BLACK_BK_COLOR}) nNewY=nNewY+8 nNewY=nNewY+18 regRow({y:nNewY,h:34,c:GREEN_WEAVE_COLOR,bgc:BLUE_BK_COLOR}) nNewY=nNewY+34 regRow({y:nNewY,h:8,c:BLACK_WEAVE_COLOR,bgc:BLACK_BK_COLOR}) nNewY=nNewY+8 regRow({y:nNewY,h:9,c:WHITE_WEAVE_COLOR,bgc:BLUE_BK_COLOR}) nNewY=nNewY+9 regRow({y:nNewY,h:8,c:BLACK_WEAVE_COLOR,bgc:BLACK_BK_COLOR}) nNewY=nNewY+8 regRow({y:nNewY,h:8,c:YELLOW_WEAVE_COLOR}) nNewY=nNewY+8 regRow({y:nNewY,h:26,c:BLACK_WEAVE_COLOR,bgc:BLACK_BK_COLOR}) nNewY=nNewY+26 regRow({y:nNewY,h:18,c:BLUE_WEAVE_COLOR,bgc:BLUE_BK_COLOR}) nNewY=nNewY+18 nNewY=nNewY+152 regRow({y:nNewY,h:18,c:BLUE_WEAVE_COLOR,bgc:BLUE_BK_COLOR}) nNewY=nNewY+18 regRow({y:nNewY,h:25,c:BLACK_WEAVE_COLOR,bgc:BLACK_BK_COLOR}) nNewY=nNewY+25 regRow({y:nNewY,h:8,c:YELLOW_WEAVE_COLOR}) nNewY=nNewY+8 regRow({y:nNewY,h:8,c:BLACK_WEAVE_COLOR,bgc:BLACK_BK_COLOR}) nNewY=nNewY+8 regRow({y:nNewY,h:9,c:WHITE_WEAVE_COLOR,bgc:BLUE_BK_COLOR}) nNewY=nNewY+9 regRow({y:nNewY,h:10,c:BLACK_WEAVE_COLOR,bgc:BLACK_BK_COLOR}) nNewY=nNewY+10 //console.log(nNewY) } // end of drawTartan //function weaveY1(startX,startY,nWidth,nHeight,nOffset,sColor,sBgColor) { function weaveY1(params) { let startX = params.x let startY = params.y let nWidth = params.w let nHeight = params.h let nOffset = params.o let sColor = params.c let sBgColor = params.b let sBgStichColor = params.bsc let nStart = nWidth if (nHeight>nWidth) { nStart = nHeight } // end if let x = (nStart+nOffset) * -1 let y = startY const c2 = document.createElement("canvas") c2.width = nWidth c2.height = nHeight const ctx2 = c2.getContext('2d') ctx2.lineWidth = 1.5 ctx2.strokeStyle = sColor do { ctx2.beginPath() ctx2.moveTo(x, 0) let x2 = x+nHeight let y2 = nHeight ctx2.lineTo(x2, y2) ctx2.closePath() ctx2.stroke() x = x + 6 } while (x < nWidth) ctx.drawImage(c2,startX,startY, nWidth, nHeight) } // end of weaveY1() function solidWeave(params) { let startX = params.x let startY = params.y let nWidth = params.w let nHeight = params.h let sBgColor = params.c let sWeaveColor = params.wc const STITCH_SIZE = 6 const STITCH_OFFSET = STITCH_SIZE / 2 //const STITCH_INCR = STITCH_SIZE + Math.floor(STITCH_SIZE * .7) const STITCH_INCR = 10 const c2 = document.createElement("canvas") c2.width = nWidth c2.height = nHeight const ctx2 = c2.getContext('2d') ctx2.fillStyle = sBgColor ctx2.fillRect(0, 0, nWidth, nHeight) if (typeof sWeaveColor === "string") { ctx2.lineWidth = 1 ctx2.strokeStyle = sWeaveColor let x = 0 let y = -1 let i=0 do { do { ctx2.fillRect(x, y, STITCH_SIZE, STITCH_SIZE) ctx2.strokeRect(x, y, STITCH_SIZE, STITCH_SIZE) x = x + STITCH_INCR } while (x<nWidth) y = y + STITCH_OFFSET i = i + 1 if (i===2) { i=-1 } x = i * STITCH_OFFSET } while (y < nHeight) } // end if (typeof sWeaveColor === "string") ctx.drawImage(c2,startX,startY, nWidth, nHeight) } // end of solidWeave() function regRow(params) { let nNewY = params.y let nHeight = params.h let sStitchColor = params.c let sBgColor = params.bgc let sWeaveColor = sStitchColor let nNewX = 0 if (typeof params.wc === "string") { sWeaveColor = params.wc } // end if let sWhiteBackgroundColor = sBgColor let sYellowBackgroundColor = sBgColor let sWhiteBgWeaveColor = sWeaveColor let sYellowBgWeaveColor = sWeaveColor if (sStitchColor===YELLOW_WEAVE_COLOR) { sYellowBackgroundColor = YELLOW_BK_COLOR sYellowBgWeaveColor = YELLOW_BK_WEAVE_COLOR } // end if if (sStitchColor===WHITE_WEAVE_COLOR) { sWhiteBackgroundColor = WHITE_BK_COLOR sWhiteBgWeaveColor = WHITE_BK_WEAVE_COLOR } // end if weaveY1({x:nNewX,y:nNewY,w:72,h:nHeight,o:0,c:sStitchColor}) nNewX = nNewX + 72 solidWeave({y:nNewY,x:nNewX,h:nHeight,w:18,c:sBgColor,wc.........完整代码请登录后点击上方下载按钮下载查看
网友评论0