随笔分类 - canvas
摘要：现象：canvas中插入长图，在长图底部画线，鼠标位置和实际的绘制点在Y坐标上存在偏差。 解决方法： canvas去除css关于宽高的设置（用css设置大小是缩放效果）。改用canvas.width="";
阅读全文
摘要：canvas中插入透明图片(png格式)，getImageData()生成img时，透明如何转换为白色背景的方式。 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getE
阅读全文
摘要：效果图 点击在线演示 index.js var chess=document.getElementById("chess"); var cxt=chess.getContext('2d'); cxt.strokeStyle="#BFBFBF"; var bgimg=new Image(); bgim
阅读全文
摘要：效果图 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </hea
阅读全文
摘要：原始页面是网页端demo，我从0开始学习，并调整为移动端H5页面。 另外对原文做了部分调整：修改了index页面循环不停止，部分代码冗余等问题，并增加注释。 本文为游戏的loading页面。初始化canvas，加载音乐，背景图片等游戏资源，显示开始游戏按钮。 效果图： 两点疑问： 1、RAF为什么不
阅读全文
摘要：动画实现： 通过setInterval方法不停的调用context.clearRect()方法清理画布，然后再重新绘制页面。 此外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。 init(); function init
阅读全文
摘要：效果图： 知识点： 1、ctx.save(); //保存ctx状态 ctx.restore();//回到之前ctx的状态 一般ctx.save()与ctx.restore()是成对出现的，比如我们在绘图的时候需要使用多种颜色，颜色需要不时的切换。那么使用save()和restore()方法即可比较方
阅读全文
摘要：效果图： 知识点： 1、五角星顶点坐标 (r*cos(deg)+x,-r*sin(deg)+y) 2、画圆 ctx.arc(x,y,r,0,2*Math.PI); //后两个参数开始弧度，结束弧度。0表示开始弧度为3点钟方向，0.5PI为90度。 代码： <!DOCTYPE html> <html>
阅读全文
摘要：效果图： 知识点： 1、context.beginPath(); 2、context.closePath(); 3、context.Rect(x,y,width,heght); context.fllRect(x,y,width,heght); context.strokeRect(x,y,widt
阅读全文
