这里有新鲜出炉的精品教程,程序狗速度看过来!
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五重大修改。
这篇文章为大家详细主要介绍了 js HTML5 手机刮刮乐代码, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
手机刮刮乐 HTML5 代码, 使用原型 prototype 扩展了一个 clearArc 清除圆内像素的功能, 此功能未完成扇形清除功能, 此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的齿状。如果你找到修复方法请一定要告诉我哟。不过此清除方法用于刮刮乐已经完全满足需求了。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- 刮刮乐
- </title>
- <script type="text/javascript">
- window.onload = function() {
- init();
- }
- CanvasRenderingContext2D.prototype.clearArc = function(x, y, radius, startAngle, endAngle, counterclockwise) {
- var distance = function(x0, y0, x1, y1) {
- var dis = Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
- //return Math.ceil(dis*10000)/10000;
- return Math.round(dis * 10000) / 10000;
- };
- //首先获得矩形
- var diameter = radius * 2;
- var startX = x - radius;
- var cx = radius - (0 - startX);
- startX = startX < 0 ? 0 : startX;
- cx = cx - startX;
- var startY = y - radius;
- var cy = radius - (0 - startY);
- startY = startY < 0 ? 0 : startY;
- cy = cy - startY;
- var imgData = this.getImageData(startX, startY, diameter, diameter); //需要处理的矩形
- for (var i = 0; i < imgData.data.length; i += 4) {
- //矩阵内的坐标
- var ii = i / 4;
- var ix = Math.floor(ii / imgData.width);
- var iy = ii % imgData.height;
- var dis = distance(ix, iy, cx, cy);
- if (dis <= radius) { //此点在圆内
- imgData.data[i + 0] = 0;
- imgData.data[i + 1] = 0;
- imgData.data[i + 2] = 0;
- imgData.data[i + 3] = 0;
- continue;
- }
- var dr = dis - radius;
- if (dr < Math.SQRT2) {
- var n = Math.sqrt(Math.pow(dr, 2) / 2) * 256; //新
- var o = imgData.data[i + 3];
- imgData.data[i + 3] = n < o ? n: o;
- continue;
- }
- }
- this.putImageData(imgData, startX, startY);
- };
- function init() {
- var imageWidth = 200;
- var imageHeight = 100;
- var gglc = document.getElementById("gglc");
- var gglc2D = gglc.getContext("2d");
- gglc2D.fillStyle = '#cccccc'; //设置覆盖层的颜色
- gglc2D.fillRect(1, 1, imageWidth, imageHeight); //设置覆盖的区域
- //gglc2D.clearArc(25,25,20);
- gglc.addEventListener("touchmove",
- function(event) {
- event.preventDefault();
- for (var i in event.targetTouches) {
- var touch = event.targetTouches[i];
- gglc2D.clearArc(touch.pageX, touch.pageY, 20);
- }
- },
- false);
- gglc.addEventListener("touchstart",
- function(event) {
- event.preventDefault();
- for (var i in event.targetTouches) {
- var touch = event.targetTouches[i];
- gglc2D.clearArc(touch.pageX, touch.pageY, 20);
- }
- },
- false);
- }
- </script>
- </head>
- <body>
- <div style="position: relative; width: 100%;height: 100%;">
- <div style="position: absolute; width: 200px; height: 100px; text-align: center;line-height: 100px;border: 1px solid #ccc;'">
- 谢谢惠顾
- </div>
- <canvas style="position: absolute;" id="gglc" width="201" height="101">
- </canvas>
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0525/331386.html