var allZoneData = [{'name':'辽宁省','been':'yes','id':'01'},<span style=font-family: Arial, Helvetica, sans-serif;>{'name':'吉林省','been':'yes','id':'02'},……];</span>

var myGeo = new BMap.Geocoder(); 
 
(function(){ 
 for(var i = 0;i < allZoneData.length;i++){ 
  getAllZone(allZoneData[i].name,allZoneData[i].been,allZoneData[i].id); 
 } 
})(); 
//name为省份名，been表示是否去过，id为唯一标识，cir为省份圈号（有可能一个省份有两部分封闭圆圈构成） 
function getAllZone (name,been,id) { 
 var data,temp; 
         
 var bdary = new BMap.Boundary(); 
 bdary.get(name, function(rs){ 
  var count = rs.boundaries.length;  
  for(var j = 0; j < count; j++){      
   var ply = new BMap.polygon(rs.boundaries[j], {strokeWeight: 2, strokeColor: #ff0000}); 
   data = ply.getPath(); 
   $.ajax({ 
    url: addData.PHP, 
    type:POST, 
    data: {'data':data,'name' : name,'cir':j,'been':been,'id':id}, 
    success: function(txt){ 
     console.log(txt); 
    }, 
    error: function(){ 
     alert('添加数据出错！'); 
    } 
   });   
  }         
 });         
}

<?PHP 
  header(content-type:text/html; charset=utf-8); 
  $data = $_REQUEST['data']; 
  $name = $_REQUEST['name']; 
  $cir = $_REQUEST['cir']; 
  $been = $_REQUEST['been']; 
  $id = $_REQUEST['id']; 
 
  $con = MysqL_connect(localhost,……,……); 
  if (!$con){ 
    die('Could not connect: ' . MysqL_error()); 
  } 
  MysqL_select_db(……, $con); 
  MysqL_set_charset('utf8',$con); 
 
  foreach ($data as $temp){ 
    $sql = insert into place (id,name,lng,lat,cir,been) values ('.$id.', '.$name.', '.$temp['lng'].','.$temp['lat'].','.$cir.','.$been.'); 
    if (!MysqL_query($sql,$con)){ 
      die('Error: ' . MysqL_error()); 
    } 
  } 
 
  MysqL_close($con); 
  echo 'Success'; 
?>

var drawMap = function (context,data,l,t) { //context为绘制所在的层,l和t为相对位置,data为边界对象数组 
 if(data.been == 'yes'){ 
  context.fillStyle = green; 
 }else{ 
  context.fillStyle = grey; 
 } 
 context.globalAlpha = 0.8; 
 context.beginPath(); 
 cleft = (data.coordinate[0].lng - temp_left) * bigger + l; //temp_left和temp_top为地图偏移位置. 
 ctop = (temp_top - data.coordinate[0].lat) * bigger + t; //bigger为放大倍数 
 
 context.moveto(cleft,ctop); 
           
 for(var j = 1;j < data.coordinate.length;j++){ 
  cleft = (data.coordinate[j].lng - temp_left) * bigger + l; 
  ctop = (temp_top - data.coordinate[j].lat) * bigger + t; 
  context.lineto(cleft,ctop); 
 } 
           
 context.closePath(); 
 context.stroke(); 
 context.fill(); 
}

var drawLinkLine = function(data,l,t){ //此处的l和t表示移动的相对位置 
 for(var k = 0;k < data.coordinate.length;k++){ 
  if(k % 60 == 0){ 
   moveMapContext.beginPath(); 
           
   //根据移动距离的不同，设置连线的粗细 
   lineLength = Math.sqrt(l * l + t * t) / 100; 
   lineLength = lineLength >= 4.5 ? 4.5 : lineLength; 
   moveMapContext.linewidth = 5 - lineLength; 
 
   moveMapContext.strokeStyle = rgba(0,120,60,0.4); 
   cleft = (data.coordinate[k].lng - temp_left) * bigger; 
   ctop = (temp_top - data.coordinate[k].lat) * bigger; 
   moveMapContext.moveto(cleft,ctop); 
 
   cleft = (data.coordinate[k].lng - temp_left) * bigger + l; 
   ctop = (temp_top - data.coordinate[k].lat) * bigger + t; 
   moveMapContext.lineto(cleft,ctop); 
   moveMapContext.closePath(); 
   moveMapontext.stroke(); 
  } 
 } 
}

$('#eventCanvas').mousedown(function(ev){ 
 //获取点击canvas的坐标 
 var mouseX, mouseY; 
 if(ev.layerX || ev.layerX==0){ 
  mouseX = ev.layerX; 
  mouseY = ev.layerY; 
 }else if(ev.offsetX || ev.offsetX==0){ 
  mouseX = ev.offsetX; 
  mouseY = ev.offsetY; 
 } 
 
 //保存点击时的原坐标值 
 tempX = mouseX; 
 tempY = mouseY; 
 
 //将坐标转化为经纬度 
 mouseX = mouseX/bigger + temp_left; 
 mouseY = temp_top - mouseY/bigger; 
 
 if(opts.dragall){ 
  draging = true; 
 }else{ 
  moveMapContext.clearRect(0, 0, 1100, 630); 
  //根据经纬度获得所在地理位置并获取边界坐标再画线 
  myGeo.getLocation(new BMap.Point(mouseX, mouseY), 
   function(result){ 
    tempName = ''; 
    draging = true; 
    name = result.addressComponents.province; 
    tempName = name; 
    pubFuns.drawMoveLayerLine(0,0);    
  }); 
 } 
});

$('#eventCanvas').mousemove(function(ev){ 
 var mouseX, mouseY; 
 if(ev.layerX || ev.layerX==0){ 
  mouseX = ev.layerX; 
  mouseY = ev.layerY; 
 }else if(ev.offsetX || ev.offsetX==0){ 
  mouseX = ev.offsetX; 
  mouseY = ev.offsetY; 
 } 
 if(draging){ 
  if(opts.dragall){ <span style=font-family: Arial, Helvetica, sans-serif;>//拖动整个地图，存在问题，地图画的太慢</span> 
   mapContext.clearRect(0, 0, 1100, 630); 
   for(var i = 0;i < allZoneData.length;i++){ 
    for(var j = 0;j < allData[allZoneData[i].name].length;j++){ //allData是第一次读取数据时放到内存里的变量，它包含了所有数据 
     pubFuns.drawMap(mapContext,allData[allZoneData[i].name][j],mouseX - tempX, mouseY - tempY); 
    } 
   } 
   }else{ 
    moveMapContext.clearRect(0, 0, 1100, 630); 
    pubFuns.drawMoveLayerLine(mouseX - tempX, mouseY - tempY); 
   }  
  } 
});

$('#eventCanvas').mouseup(function(e){ 
 if(opts.dragall){  
 }else{ 
  moveMapContext.clearRect(0, 0, 1100, 630); 
 } 
 draging = false; 
});

html5 canvas和JavaScript如何实现本地截图

最近有时间了解了下html5的各API，发现新浪微博的头像设置是使用canvas实现截图的，加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传《JavaScript File API文件上传预览》，更加觉得html5好玩了，想着也试试写写这功能权当学习canvas吧。
下面奉上我自己写的一个demo，代码写得比较少，很多细节不会处理。如果有不得当的地方恳请指教，谢谢啦 ^_^ ^_^
功能实现步奏：

• 一、获取文件，读取文件并生成url
  

• 二、根据容器的大小使用canvas绘制图片
  

• 三、使用canvas绘制遮罩层
  

• 四、使用canvas绘制裁剪后的图片
  

• 五、拖动裁剪框，重新裁剪图片
  

PS：因为是先把demo写好再写这篇文章的，所以分段贴的代码是直接从代码里面一段段拷的，要留意this对象喔
第一步：获取文件，读取文件并生成url
在这里我是使用html5里面的file api处理本地文件上传的，因为这样可以不需要把图片上传到服务器，再由服务器返回图片地址来做预览，详细请看：使用File API 之FileReader实现文件上传

document.getElementById('post_file').onchange = function() {
  var fileList = this.files[0];
  var oFReader = new FileReader();
  oFReader.readAsDataURL(fileList);
  oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
    postFile.paintimage(oFREvent.target.result);//把预览图片url传给函数
  };
}　　

第二步：根据容器的大小使用canvas绘制图片

在上一步使用File API的FileReader已经得到了需要上传图片的地址了，接下来需要使用canvas把这个图片绘制出来。这里为什么不直接插入img而用canvas重新绘制呢，这不是多此一举了吗？其实不然。如果用img直接插入页面，就无法自适应居中了，如果使用canvas绘制图片，不但能使图片自适应居中以及能等比例缩放，并且方便把图片的坐标，尺寸大小传给后来的遮罩层，这样能根据图片的坐标以及图片的尺寸大小来绘制遮罩层。
这里稍微要注意下canvas的drawImage方法。

paintimage: function(url) {
  var t = this;
  var createCanvas = t.getimage.getContext(2d);
  var img = new Image();
  img.src = url;
  img.onload = function(){
 
    //等比例缩放图片(如果图片宽高都比容器小，则绘制的图片宽高 = 原图片的宽高。)
    //如果图片的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例缩放
    //t.imgWidth：绘制后图片的宽度；t.imgHeight：绘制后图片的高度；t.px：绘制后图片的X轴；t.py：绘制后图片的Y轴
    if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
      t.imgWidth = img.width;
      t.imgHeight = img.height;
 
    } else {
      var pWidth = img.width / (img.height / t.regional.offsetHeight);
      var pHeight = img.height / (img.width / t.regional.offsetWidth);
      t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
      t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
    }
    //图片的坐标
    t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
    t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';
     
    t.getimage.height = t.imgHeight;
    t.getimage.width = t.imgWidth;
    t.getimage.style.left = t.px;
    t.getimage.style.top = t.py;
 
    createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);//没用直接插入背景图片而用canvas绘制图片，是为了调整所需框内图片的大小
    t.imgurl = t.getimage.toDataURL();//储存canvas绘制的图片地址
    t.cutimage();
    t.drag();
  };
},
　

出来的效果是这样的：

第三步：使用canvas绘制遮罩层
在上一步中已经把需要裁剪的背景图绘制出来了，现在需要根据背景图的坐标和尺寸来绘制遮罩层覆盖在背景上面，并且使用canvas的clearRect方法清空出一块裁剪区域，使之与不裁剪的地方做明暗对比。
（这里的遮罩层仅仅是用来做显示效果，并没有做裁剪图片的工作。不知道这一步能不能直接去掉？有知道的童鞋麻烦告诉下我。）

//绘制遮罩层：
t.editBox.height = t.imgHeight;
t.editBox.width = t.imgWidth;
t.editBox.style.display = 'block';
t.editBox.style.left = t.px;
t.editBox.style.top = t.py;
 
var cover = t.editBox.getContext(2d);
cover.fillStyle = rgba(0, 0, 0, 0.5);
cover.fillRect (0,0, t.imgWidth, t.imgHeight);
cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);
　

第四步：使用canvas绘制裁剪后的图片
在第三步里面，把遮罩层绘制好了，但是遮罩层并没有裁剪的能力，仅仅是用来显示裁剪区域与非裁剪区域的对比而已，所以这里就开始做裁剪图片的功能了。同样使用到canvas的drawImage方法。

//绘制剪切图片：
t.editPic.height = t.sHeight;
t.editPic.width = t.sWidth;
var ctx = t.editPic.getContext('2d');
var images = new Image();
images.src = t.imgurl;
images.onload = function(){
  ctx.drawImage(images,t.sx, t.sy, t.sHeight, t.sWidth, 0, 0, t.sHeight, t.sWidth); //裁剪图片
  document.getElementById('show_edit').getElementsByTagName('img')[0].src = t.editPic.toDataURL(); //把裁剪后的图片使用img标签显示出来
}

第五步：拖动裁剪框，重新裁剪图片
使用截图上传头像功能时我们希望能裁剪到满意的图片，所以裁剪框就需要不停的变动才得以裁剪出完美的图片。前几步已经把裁剪图片的基本功能做出来了，所以现在需要做的就是裁剪框跟进鼠标的移动来实时裁剪图片。

drag: function() {
  var t = this;
  var draging = false;
  var startX = 0;
  var startY = 0;
 
  document.getElementById('cover_Box').onmousemove = function(e) {
    //获取鼠标到背景图片的距离
    var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
    var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
    //判断鼠标是否在裁剪区域里面：
    if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
      this.style.cursor = 'move';
       
      this.onmousedown = function(){
        draging = true;
        //记录上一次截图的坐标
        t.ex = t.sx;
        t.ey = t.sy;
        //记录鼠标按下时候的坐标
        startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
        startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
      }
      window.onmouseup = function() {
        draging = false;
      }
       
      if (draging) {
        //移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置)，裁剪区域不能超出遮罩层的区域;
        if ( t.ex + (pageX - startX) < 0 ) {
          t.sx = 0;
        } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
          t.sx = t.imgWidth - t.sWidth;
        } else {
          t.sx = t.ex + (pageX - startX);
        };
 
        if (t.ey + (pageY - startY) < 0) {
          t.sy = 0;
        } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
          t.sy = t.imgHeight - t.sHeight;
        } else {
          t.sy = t.ey + (pageY - startY);
        }
 
        t.cutimage();
      }
    } else{
      this.style.cursor = 'auto';
    }
  };
}　　

大功告成，图片如下：

有童鞋指出，每移动一下鼠标就裁剪一张图片不是很耗性能吗，为什么不用background-position来做预览效果 保存的时候才用canvas裁出来？一听觉得这建议很有道理，所以就在第四步把代码稍微改动了一下。鼠标移动的时候的预览效果是改变图片的background-position，点击保存按钮的时候才裁剪图片，把裁剪下来的图片生成新的url就可以传给服务器啦~~
以下代码是改正过来的，大家有什么其它好的建议欢迎指出来喔 ^_^ ^_^
demo完整代码如下：
注意：因为用的是seajs写的，所以稍微留意下文件的加载情况啦
css：

body{text-align:center;}
#label{border:1px solid #ccc;background-color:#fff;text-align:center;height:300px; width:300px;margin:20px auto;position:relative;}
#get_image{position:absolute;}
#edit_pic{position:absolute;display:none;background:#000;}
#cover_Box{position: absolute;z-index: 9999;display:none;top:0px;left:0px;}
#show_edit{margin: 0 auto;display:inline-block;}
#show_pic{height:100px;width:100px;border:2px solid #000;overflow:hidden;margin:0 auto;display:inline-block; }

html：　

<input type=file name=file id=post_file>
<button id=save_button>保存</button>
<p id=label>
  <canvas id=get_image></canvas>
  <p>
    <canvas id=cover_Box></canvas>
    <canvas id=edit_pic></canvas>
  </p>
</p>
<p>
  <span id=show_edit></span>
  <span id=show_pic><img src=></span>
</p>


<script type=text/javascript src=../../lib/seajs/sea.js></script>
<script type=text/javascript>
seajs.use(['_example/fileAPI/index_v2.js'], function(clipFile) {
  clipFile.init({
    clipPos: {    //裁剪框的默认尺寸与定位
      x: 15,
      y: 15,
      height: 100,
      width: 100,
    },
  });
});

</script>　

js：

define(function(require, exports, module) {

  'use strict';

  var postFile = {
    init: function(options) {
      var t = this;
      t.regional = document.getElementById('label');
      t.getimage = document.getElementById('get_image');
      t.clipPic = document.getElementById('edit_pic');
      t.coverBox = document.getElementById('cover_Box');
      t.achieve = document.getElementById('show_edit');

      t.clipPos = options.clipPos;

      //初始化图片基本参数
      t.bgPagePos = {     
        x: 0,
        y: 0,
        height: 0,
        width: 0
      };

      //传进图片
      document.getElementById('post_file').addEventListener(change, t.handleFiles, false);

      //点击保存按钮后再裁剪图片
      document.getElementById('save_button').onclick = function() {

        //绘制剪切后的图片：
        t.clipPic.height = t.clipPos.height;
        t.clipPic.width = t.clipPos.width;

        var ctx = t.clipPic.getContext('2d');
        var images = new Image();
        images.src = t.imgurl;
        images.onload = function(){

          //drawImage(images,相对于裁剪图片的X, 相对于裁剪图片的Y, 裁剪的高度, 裁剪的宽度, 显示在画布的X, 显示在画布的Y, 显示在画布多高, 显示在画布多宽);
          ctx.drawImage(images,t.clipPos.x, t.clipPos.y, t.clipPos.height, t.clipPos.width, 0, 0, t.clipPos.height, t.clipPos.width); //裁剪图片
          
          document.getElementById('show_pic').getElementsByTagName('img')[0].src = t.clipPic.toDataURL();
        }
      };

      t.drag();
    },
    handleFiles: function() {

      var fileList = this.files[0];
      var oFReader = new FileReader();

      //读取文件内容
      oFReader.readAsDataURL(fileList);

      //当读取操作成功完成时调用.
      oFReader.onload = function (oFREvent) { 

        //把预览图片URL传给函数
        postFile.paintimage(oFREvent.target.result);
      };
    },
    paintimage: function(url) {
      var t = this;
      var createCanvas = t.getimage.getContext(2d);

      var img = new Image();
      img.src = url;

      //把传进来的图片进行等比例缩放
      img.onload = function(){
        //等比例缩放图片(如果图片宽高都比容器小，则绘制的图片宽高 = 原图片的宽高。)
        //如果图片的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例缩放

        //t.bgPagePos.width：绘制后图片的宽度;
        //t.bgPagePos.height：绘制后图片的高度;
        //t.bgPagePos.x：绘制后图片的X轴;
        //t.bgPagePos.y：绘制后图片的Y轴
        if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
          t.bgPagePos.width = img.width;
          t.bgPagePos.height = img.height;

        } else {
          var pWidth = img.width / (img.height / t.regional.offsetHeight);
          var pHeight = img.height / (img.width / t.regional.offsetWidth);

          t.bgPagePos.width = img.width > img.height ? t.regional.offsetWidth : pWidth;
          t.bgPagePos.height = img.height > img.width ? t.regional.offsetHeight : pHeight;
        }

        //图片的坐标
        t.bgPagePos.x = (t.regional.offsetWidth - t.bgPagePos.width) / 2 + 'px';
        t.bgPagePos.y = (t.regional.offsetHeight - t.bgPagePos.height) / 2 + 'px';
        
        t.getimage.height = t.bgPagePos.height;
        t.getimage.width = t.bgPagePos.width;
        t.getimage.style.left = t.bgPagePos.x;
        t.getimage.style.top = t.bgPagePos.y;

        createCanvas.drawImage(img,0,0,t.bgPagePos.width,t.bgPagePos.height);//没用直接插入背景图片而用canvas绘制图片，是为了调整所需框内图片的大小
        
        t.imgurl = t.getimage.toDataURL();//储存canvas绘制的图片地址

        t.clipImg();
      };
    },
    clipImg: function() {
      var t = this;

      //绘制遮罩层：
      t.coverBox.height = t.bgPagePos.height;
      t.coverBox.width = t.bgPagePos.width;
      t.coverBox.style.display = 'block';
      t.coverBox.style.left = t.bgPagePos.x;
      t.coverBox.style.top = t.bgPagePos.y;

      var cover = t.coverBox.getContext(2d);
      cover.fillStyle = rgba(0, 0, 0, 0.5);
      cover.fillRect (0,0, t.bgPagePos.width, t.bgPagePos.height);
      cover.clearRect(t.clipPos.x, t.clipPos.y, t.clipPos.height, t.clipPos.width);

      t.achieve.style.background = 'url(' + t.imgurl + ')' + -t.clipPos.x + 'px ' + -t.clipPos.y + 'px no-repeat';
      t.achieve.style.height = t.clipPos.height + 'px';
      t.achieve.style.width = t.clipPos.width + 'px';
    },
    drag: function() {
      var t = this;
      var draging = false;
      var _startPos = null;

      t.coverBox.onmousemove = function(e) {
        e = e || window.event;

        if ( e.pageX == null && e.clientX != null ) {

          var doc = document.documentElement, body = document.body;

          e.pageX = e.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
          e.pageY = e.clientY + (doc && doc.scrollTop || body && body.scrollTop);
        }

        //获取鼠标到背景图片的距离
        var _mousePos = {
          left: e.pageX - ( t.regional.offsetLeft + this.offsetLeft ),
          top: e.pageY - ( t.regional.offsetTop + this.offsetTop )
        }

        //判断鼠标是否在裁剪区域里面：
        if ( _mousePos.left > t.clipPos.x && _mousePos.left < t.clipPos.x + t.clipPos.width && _mousePos.top > t.clipPos.y && _mousePos.top < t.clipPos.y + t.clipPos.height ) {
          this.style.cursor = 'move';
          
          this.onmousedown = function(){
            draging = true;
            //记录上一次截图的坐标
            t.ex = t.clipPos.x; 
            t.ey = t.clipPos.y;

            //记录鼠标按下时候的坐标
            _startPos = {
              left: e.pageX - ( t.regional.offsetLeft + this.offsetLeft ),
              top: e.pageY - ( t.regional.offsetTop + this.offsetTop )
            }
          }

          if (draging) {
            //移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置)，裁剪区域不能超出遮罩层的区域;
            if ( t.ex + ( _mousePos.left - _startPos.left ) < 0 ) {
              t.clipPos.x = 0;
            } else if ( t.ex + ( _mousePos.left - _startPos.left ) + t.clipPos.width > t.bgPagePos.width ) {
              t.clipPos.x = t.bgPagePos.width - t.clipPos.width;
            } else {
              t.clipPos.x = t.ex + ( _mousePos.left - _startPos.left );
            };

            if (t.ey + ( _mousePos.top - _startPos.top ) < 0) {
              t.clipPos.y = 0;
            } else if ( t.ey + ( _mousePos.top - _startPos.top ) + t.clipPos.height > t.bgPagePos.height ) {
              t.clipPos.y = t.bgPagePos.height - t.clipPos.height;
            } else {
              t.clipPos.y = t.ey + ( _mousePos.top - _startPos.top );
            }

            t.clipImg();
          }

          document.body.onmouseup = function() {
            draging = false;
            document.onmousemove = null;
            document.onmouseup = null;
          }
        } else{
          this.style.cursor = 'auto';
        }
      };
    }
  }
  return postFile;
});

HTML5 canvas实现可拖拽时钟的示例代码分享

下面介绍一个自己搞的小时钟，方便拖拽。

那么如何插入到自己的界面中呢？

只需要加上如下代码就好了：

<script type="text/javascript" src="clock.js">
</script>

clcok.js的完整代码如下：

var extra=document.createElement('p');
    extra.style.position='absolute';
    var extra_canvas=document.createElement('canvas');
    extra_canvas.id="extra_canvas";
    extra.appendChild(extra_canvas);
    document.body.appendChild(extra);

    var flag;
    var currentRectX;
    var currentRectY;
  
  function init(){
     flag=true;
     currentRectX=0;
     currentRectY=0;
    }

    

function clock(size,x,y){
  /*    if(!flag){
          document.body.removeChild(extra_canvas);
          console.log('remove');
        }
  
  */
  if (!size){size=200;}
  if (!x)x=0;
  if (!y)y=0;
  extra_canvas.width=size;
  extra_canvas.height=size;
  var context=extra_canvas.getContext('2d');
  
  extra.style.left=currentRectX+'px';
  extra.style.top=currentRectY+'px';
  //console.log(currentRectX,currentRectY);
  //context.fillStyle='#FF0000';
  //context.fillRect(0,0,100,100);
  //绘制表盘
      var centerX=x+size/2;
      var centerY=y+size/2;
    //console.log(centerX,centerY);
      var radius=(size-40)/2;
  context.clearRect(x,y,x+size,y+size);
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.lineWidth = 5;
  context.stroke;
  context.stroke();
  var grd = context.createLinearGradient(centerX-radius, centerY-radius,centerX+radius, centerY+radius);
  grd.addColorStop(0, "#FFFFFF"); // light blue
  grd.addColorStop(1, "#DDDDFF"); // dark blue
  context.fillStyle = grd;
  context.fill();
  context.closePath();

  //绘制数字时刻
  context.beginPath();
  //context.font="9pt";
 // context.fontsize=9px;
  //context.fontFamily="Square721 BT";
  context.fill; // text color
  context.fillText("12",centerX-7,centerY-radius+18);
  context.fillText("3",centerX+radius-18,centerY+4);
  context.fillText("6",centerX-3,centerY+radius-12);
  context.fillText("9",centerX-radius+12,centerY+4);
  
  context.closePath();
/*  //显示日期
context.beginPath();
context.TextOut(100,100,"星期");
context.closePath();
*/
  //绘制刻度
  for (var i=0;i<12;i++){
      context.beginPath();
    if(i%3){
           context.lineWidth = 3;
            context.stroke;
            len=5;
        }else{
            context.lineWidth = 6;
            context.stroke;
            len=10;
        }
       arc=i/6*Math.PI;
       kx=centerX+radius*Math.cos(arc);
       ky=centerY-radius*Math.sin(arc);
       context.moveTo(kx,ky);
       kx=centerX+(radius-len)*Math.cos(arc);
       ky=centerY-(radius-len)*Math.sin(arc);
       context.lineTo(kx,ky);
       
       context.stroke();
       context.closePath();
      }
  //绘制表中心
     context.beginPath();
     context.arc(centerX, centerY, 4, 0, 2 * Math.PI, false);
     context.lineWidth = 2;
     context.stroke;
     context.stroke();
     context.closePath();
     
  //绘制时针分针
  
  var now=new Date();
  var hour=now.getHours()%12;
  var minute=now.getMinutes();
  var second=now.getSeconds();
  hour=hour+minute/60;//update the time!!
  minute=minute+second/60;

  var arc_hour=hour/6*Math.PI;
  context.beginPath();
  kx=centerX+(radius-40)*Math.sin(arc_hour);
  ky=centerY-(radius-40)*Math.cos(arc_hour);
  context.moveTo(kx,ky);
  kx=centerX+10*Math.sin(arc_hour+Math.PI);
  ky=centerY-10*Math.cos(arc_hour+Math.PI);
  context.lineTo(kx,ky);
  context.lineWidth = 6;
  context.stroke;
  context.stroke();
  context.closePath();
  
  context.beginPath();
  var arc_minute=minute/30*Math.PI;
  context.beginPath();
  kx=centerX+(radius-20)*Math.sin(arc_minute);
  ky=centerY-(radius-20)*Math.cos(arc_minute);
  context.moveTo(kx,ky);
  kx=centerX+20*Math.sin(arc_minute+Math.PI);
  ky=centerY-20*Math.cos(arc_minute+Math.PI);
  context.lineTo(kx,ky);
  context.lineWidth = 4;
    context.stroke;
  context.stroke();
  context.closePath();
//  flag=false;
  context.beginPath();
  var arc_second=second/30*Math.PI;
  context.beginPath();
  kx=centerX+(radius-20)*Math.sin(arc_second);
  ky=centerY-(radius-20)*Math.cos(arc_second);
  context.moveTo(kx,ky);
  kx=centerX+20*Math.sin(arc_second+Math.PI);
  ky=centerY-20*Math.cos(arc_second+Math.PI);
  context.lineTo(kx,ky);
  context.lineWidth = 2;
    context.stroke;
  context.stroke();
  context.closePath();

}
/*
extra.onmousedown=null;
extra.onmouseup=null; 
extra.onmousemove=null;
*/
extra_canvas.onmousedown=canvasMouseDownHandler;
extra_canvas.onmouseup=canvasMouseUpHandler; 
function canvasMouseDownHandler(event){
    var canvasMouseX=event.screenX;
    var canvasMouseY=event.screenY;
    extra_canvas.onmousemove=canvasMouseMoveHandler;
  //  console.log(&#39;down&#39;);
    startDragMouseX=canvasMouseX;
    startDragMouseY=canvasMouseY;
    startDragRectX=currentRectX;
    startDragRectY=currentRectY;
  }
  function canvasMouseMoveHandler(event){
      event.preventDefault(); 
    var canvasMouseX=event.screenX;
    var canvasMouseY=event.screenY;
   // console.log(&#39;move&#39;);
    currentRectX=startDragRectX+canvasMouseX-startDragMouseX;
    currentRectY=startDragRectY+canvasMouseY-startDragMouseY;
    //console.log(currentRectX,currentRectY);
    clock();
  }

  function canvasMouseUpHandler(event){
    extra_canvas.onmousemove=null;
    //console.log(&#39;up&#39;);
  }
/*  function cc(){
       clock(null,0,0);
}
*/
//window.setInterval(cc, 200);
init();
window.setInterval(clock, 200);

以上就是HTML5 canvas实现可拖拽时钟的示例代码分享的详细内容，更多请关注php中文网其它相关文章！

javascrip+HTML5 Canvas绘制转盘抽奖_javascript技巧

之前做过的项目中，有需要抽奖转盘功能的。项目已经完工一段时间了，也没出现什么严重的bug，所以现在拎出来分享给大家。

功能需求
1、转盘要美观，转动效果流畅。
2、转盘上需要显示奖品图片，并且奖品是后台读取的照片和名字。
3、转动动画完成后要有相应提示。
4、获取的奖品具体算法在数据库里操作，前端只提供最后的效果展示。 

知识要点
1、引用了一个jq插件：awardRotate，用来实现更智能化的转动（插件下载：http://www.jqcool.net/jquery-jqueryrotate.html）。
2、使用canvas标签和对应的html5 api 进行操作。(canvas中文手册可以查看http://javascript.ruanyifeng.com/htmlapi/canvas.html

正文
引用大转盘样式

转盘插件所需参数：

由参数可知，我们需要从服务端获取相应的奖品名称，奖品内容，奖品图片页面标签等信息，再对大转盘进行渲染。
所以我们的第一步操作就是向服务端发送请求获取对应的奖品信息，并且遍历到生成大转盘所需的数组参数里：

data.list是我获取来的奖品json数据：

由于客户要求奖品没有“谢谢参与”，所以最低奖品也为“优胜奖”，所以在遍历奖品之后，插入有关“优胜奖”的渲染描述即可：

因为图片加载需要时间，而使用canvas复制图片需要图片加载完成后才能绘制，所以我使用了preloadimages，让所有奖品图片都加载完毕后进行大转盘的渲染工作：

绘制转盘代码：

每一步基本上都有注释，对于canvas方法有不理解的可以百度，或者查询我上面分享的中文手册。
html代码为：

效果图：

点击事件执行代码：

上面的代码实现了基本上的逻辑，还需要一个转动转盘的方法来响应服务端传过来的结果：

好了 主要的功能代码都已分享完毕了，还有些工具方法不理解的，可以留言 我会补充进去的。
总结
canvas是html5很强大的一张王牌，可以实现许多绚丽的效果，希望本文可以帮到一些正在学习使用canvas的朋友们。

我们今天的关于javascript html5 canvas实现可拖动省份的中国地图和html5中国地图模块的分享就到这里，谢谢您的阅读，如果想了解更多关于html+javascript实现可拖动可提交的弹出层对话框效果_javascript技巧、html5 canvas和JavaScript如何实现本地截图、HTML5 canvas实现可拖拽时钟的示例代码分享、javascrip+HTML5 Canvas绘制转盘抽奖_javascript技巧的相关信息，可以在本站进行搜索。