<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #xin:after {
        content:"\2735";
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var canvas = document.getElementById("cans");
            var context = canvas.getContext("2d");
            context.moveTo(20, 10);//设置起点
            context.lineTo(140, 60);//设置结束点
            context.strokeStyle = "red";//设置线条的颜色
            context.lineWidth = "2";//设置线条的宽度
            context.stroke();//将线条绘制在画板上  




 context.font = "bold 40px 宋体";//设置绘制的样式 是否加粗 字体大小 字体样式
            context.strokeStyle = "blue";//设置边框的颜色
            context.strokeRect(20, 10, 120, 50);//绘制矩形 (起点坐标x ,y ,长，宽)
            context.fillText("我是文字",40,40);
            context.fillStyle = "lightblue";
            context.fillRect(40, 40, 40, 50);//填充矩形    
            //画圆形
            context.beginPath();
            context.arc(100, 100, 20, 0, Math.PI*3, false);//定义圆形 X Y 半径 开始角度 结束的角度 是否逆时针
            context.closePath();
            context.fillStyle = "lightblue";//填充的颜色
            context.fill();





            //绘制图片
            var image = new Image();//定义图片
            image.src = "img/123.png";//设置路径
            var canvas = document.getElementById("canvas_img");//获取画板
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");//设置画板
            image.onload = function () {//当图片加载完就会知道画板【关键】
                context.drawImage(image, 0, 0);//参数 要绘制的图片 绘制的位置X Y
                //context.drawImage(image, 0, 0, 100, 200)//后两个参数 绘制图片的宽度  高度
            }
           
        })





       
        
    </script>
</head>
<body>
    <div style="width:300px;height:300px;margin:0 auto;border:1px  solid black">
        <canvas style="width: 200px; height: 200px;border:1px solid black;margin:10px" id="cans"></canvas>
    </div>




 <canvas style="width:200px;height:200px;border:1px solid black" id="liu"></canvas>
    <div id="xin"></div>
    <div>
        这是绘制的图片
         <canvas id="canvas_img">
         </canvas>
    </div>
</body>
</html>


 




 2 canvas 跟windows坐标的转换




 var bbox=cxt.getBoundingClientRect()//获取元素的位置  距离窗体的距离  top  left  right bottom
		 var x=event.clientX-bbox.top;
		 var y=event.clientY-bbox.left;