canvas\u3092\u4f7f\u3063\u305f\u30b7\u30f3\u30d7\u30eb\u306a\u6642\u8a08\u306e\u4f8b<\/p>\n
\u6642\u523b\u306b\u5fdc\u3058\u3066\u6a2a\u5e45\u304c\u5909\u308f\u308b\u3068\u3044\u3046\u3060\u3051\u3067\u3059\u304c\uff0c\uff0c<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>Time<\/title>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no\">\r\n<!-- meta\u30bf\u30b0\u3067\u3000\u30b9\u30de\u30db\u306e\u6319\u52d5\u3092\u5236\u9650\u3057\u3066\u3044\u308b -->\r\n<\/head>\r\n<body>\r\n\r\n<canvas id=\"myCanvas\" width=\"300\" height=\"300\" style=\"border:1px solid #000000;\"><\/canvas>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\nvar canvas = document.getElementById(\"myCanvas\");\r\nvar context = canvas.getContext(\"2d\");\r\n\r\nfunction myTokei(){\r\ncontext.clearRect(0, 0, canvas.width, canvas.height);\r\nmyDate = new Date();\r\nmyHours = myDate.getHours();\r\nmyMin = myDate.getMinutes();\r\nmySec = myDate.getSeconds();\r\n\/\/console.log(myHours + \":\"+ myMin + \":\"+ mySec);\r\n\r\ncontext.fillStyle = \"#FF0000\";\/\/\u8d64\r\ncontext.fillRect(0, 0, (myHours\/23)*300, 99);\r\n\r\ncontext.fillStyle = \"#00FF00\";\/\/\u7dd1\r\ncontext.fillRect(0, 100, (myMin\/59)*300, 100);\r\n\r\ncontext.fillStyle = \"#0000FF\";\/\/\u9752\r\ncontext.fillRect(0, 200, (mySec\/59)*300, 100);\r\n\r\n}\r\n\r\nsetInterval(\"myTokei()\",1000);\r\n\r\n<\/script>\r\n\r\n\r\n\r\n<\/body>\r\n<\/html><\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
canvas\u3092\u4f7f\u3063\u305f\u30b7\u30f3\u30d7\u30eb\u306a\u6642\u8a08\u306e\u4f8b \u6642\u523b\u306b\u5fdc\u3058\u3066\u6a2a\u5e45\u304c\u5909\u308f\u308b\u3068\u3044\u3046\u3060\u3051\u3067\u3059\u304c\uff0c\uff0c <!DOCTYPE html> <html> <head> <title>Time&l … \u7d9a\u304d\u3092\u8aad\u3080 canvas\u3092\u4f7f\u3063\u305f\u30b7\u30f3\u30d7\u30eb\u306a\u6642\u8a08<\/span>