h5 canvas 小球移动 - gyz418_H5之家 - 中国HTML5教程资源分享第一站

h5 canvas 画图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        $().ready(function () {
            var $c=$("#cans");
            $c.bind('mousemove', function (event) {
                var x=event.clientX;
                var y=event.clientY;
                $("#res").text("坐标：x轴"+x+"坐标：y轴"+y);
            });
            // 画矩形
            var d=$c.get(0).getContext("2d");  //2d
            d.fillStyle="red";    //颜色
            d.fillRect(0,0,100,100); // 矩形
            d.fillStyle="rgba(0,0,255,0.5)";  //最后一个是程春明度
            d.fillRect(200,0,100,100);
//            画线
            d.moveTo(110,110); //起始位置
            d.lineTo(130,130); //终止位置
            d.lineTo(155,120); // 如果没有再次设置起始位置则从终止位置继续画
            d.stroke(); // 结束图形
//            圆
            d.fillStyle="blue";
            d.beginPath(); // 从新开始画，防止 冲突重叠
            d.arc(100,200,30,0,Math.PI*2,true); // x y 坐标 半径30
            d.closePath(); // 结束画布，防止冲突重叠
            d.fill(); // 结束渲染
//            颜色渐变
            var grd= d.createLinearGradient(250,250,375,250); // 颜色渐变的起始和终止坐标
            grd.addColorStop(0,'red'); // 0 表示起点  0.1 0.2.。。1 表示终点
            grd.addColorStop(0.8,'green');
            grd.addColorStop(1,'blue');

            d.fillStyle=grd;
            d.fillRect(250,250,375,250);  // 设置色块
//            载入图形  chrome 不支持
            var img=new Image()
            img.src="../img/logo.png"
            d.drawImage(img,200,30);



        });
    </script>
</head>
<body>
<canvas id="cans" width="500" height="500">浏览器不支持canvas</canvas>
<div id="res"></div>
</body>
</html>