JS- basic

• JS30

<canvas id='draw'/>
<script>
const canvas = document.querySelector('#draw')
const ctx = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
ctx.strokeStyle = 'green'
ctx.lineJoin = 'round'
ctx.lineCap = 'round'

let isDrawing = false
let lastX = 0, lastY =0
let hue = 0, direction = true

function draw(e) {
    if(!isDrawing) return
    
    ctx.strokeStyle = `hsl(${hue},100%,50%)`
    ctx.beginPath()
    ctx.moveTo(lastX, lastY)
    ctx.lineTo(e.offsetX, e.offsetY)
    ctx.stroke()
    [lastX,lastY] = [e.offsetX, e.offsetY]
    hue++
    if(hue>= 360){hue = 0}
    if(ctx.lineWidth >= 100|| ctx.lineWidth <=1){
        direction = !direction
    }
    if direction? ctx.linewidth++ ; ctx.linewidth--
}

canvas.addEventListener('mousemove', ()=>{
    isDrawing = true;
    [lastX,lastY] = [e.offsetX, e.offsetY]    
})
canvas.addEventListener('mousedown', ()=> isDrawing = true)
canvas.addEventListener('mouseup', ()=> isDrawing = false)
canvas.addEventListener('mouseout', ()=> isDrawing = false)


</script>

前端

• React讀書會week1作業 level1->2->3
• React官網中階閱讀
  • 主要概念 10,11,12

後端

• pHp
• 為你自己學laravel

雜

• 閱讀今年鐵人賽其他文章
  • 從異世界歸來發現只剩自己不會 Kubernetes系列
  • 軟體架構師的自我修養系列