HTML5--canvas笔记(2)

最新推荐文章于 2021-12-15 11:35:03 发布

ZombieZHAO

最新推荐文章于 2021-12-15 11:35:03 发布

阅读量966

点赞数

分类专栏： HTML5高级编程

本文链接：https://blog.csdn.net/ZombieZHAO/article/details/41050193

版权

HTML5高级编程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天通过书中的一个小例子，学到了很多HTML canvas和js中新函数的用法。该例子是获取鼠标位置，鼠标在canvas上某处停留的时间越久，该处就会变亮。代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="heatPoint.aspx.cs" Inherits="TestDemo_heatPoint" %>

<!DOCTYPE html>

<html >
<head >
<meta  charset="utf-8"/>
    <title>CANVAS 热点测试图</title>
    <style type ="text/css">
        #heatmap {
            background-image:url("mapbg.jpg");
        }
    </style>
</head>
<body>
    <h2>HeatMap</h2>
    <canvas id ="heatmap" class ="clear" style ="border :1px solid" height ="300" width ="300"></canvas>
    <button id ="resetButton">Reset</button>
    
    <script>
        var points = {};
        var SCALE = 3;
        var x = -1;
        var y = -1;
        var canvas = document.getElementById("heatmap");
        var context = canvas.getContext('2d');
        function loadDemo() {
            document.getElementById("resetButton").onclick = reset;
            
            context.globalAlpha = 0.2;
            context.globalCompositeOperation = "lighter";
            function sample() {
                if (x != -1) {
                    addToPoint(x, y);
                }
                setTimeout(sample, 100);
                                        
            }
           

            canvas.onmousemove = function (event) {
                x = event.clientX - event.target.offsetLeft;
                y = event.clientY - event.target.offsetTop;
                addToPoint(x, y);
            }
            sample();
        }
        //清空记录
        function reset() {
            points = {};
            context.clearRect(0, 0, 300, 300);
            x = -1;
            y = -1;
        }
        function getColor(intensity) {
            var colors = ["#072933", "#2E4045", "#8C593B", "#B2814E", "#FAC268", "#FAD237"];
            return colors[Math.floor(intensity/2)];
        }
        
        function drawPoint(x,y,radius){
            context.fillStyle = getColor(radius);
            radius = Math.sqrt(radius)*6;//sqrt()开平方根

            context.beginPath();
            context.arc(x, y, radius, 0, Math.PI * 2, true);

            context.closePath();
            context.fill();
        }

        function addToPoint(x,y){
            x = Math.floor(x / SCALE);//floor（）向下取整，即不大于x/SCALE的最大整数
            y = Math.floor(y/SCALE);

            if (!points[[x,y]]){
                points[[x,y]] = 1;
            }
            else if(points[[x,y]]==10){//圆的半径最大为10了
                return;
            }
            else{
                points[[x,y]]++;
            }
            drawPoint(x*SCALE,y*SCALE,points[[x,y]]);
        }
        window.addEventListener("load",loadDemo,true);
    </script>
   
</body>
</html>

这个小程序真的让我看到了编程的神奇，我醒悟的比较晚啊。。。。

学到的新知识：

1.var points = {}; javascript中{}的含义是定义了一个空对象，是 new Object();的简写

2. context.globalCompositeOperation = "lighter"; globalCompositeOperation 设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。其中lighter 显示源图像 + 目标图像。w3school中有具体的解释http://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp

3.arc（x,y,r,sAngle,eAngle,counterclockwise）创建弧或者曲线。w3school中的解释http://www.w3school.com.cn/tags/canvas_arc.asp

4.floor（x）向下取整，即不大于x的最大整数

5. setTimeout()w3school中的解释http://www.w3school.com.cn/jsref/met_win_settimeout.asp

6.onmousemove : onmouseover 意思是如果鼠标指针在该元素的上面就触发,onmousemove 意思是如果鼠标指针在该元素的上面移动就触发,很显然，“物体A在物体B的上面”跟“物体A在物体B的上面移动”是两种完全不同的状态（或者说概念），前者不管怎么变化，只要物体A仍然在物体B的上面，这个状态就不会改变的，而后者就不同了，每一次移动都会造成坐标的改变，就是说每次移动都会造成状态改变的。总结以上所述就是：onmouseover只触发一次（只要鼠标移动到元素上面就触发）；onmousemove会不断触发（只要鼠标在元素上面并且移动了鼠标就触发）。一般情况下只需用onmouseover即可，特殊情况才用onmousemove（因为这个比较耗资源），比如需要监控鼠标坐标的变化。(这段解释是从网上找的)