canvas(2)绘制路径,文本,坐标变换

来源:互联网 发布:禁止修改ip软件 编辑:程序博客网 时间:2024/05/29 16:17


canvas 绘制路径,文本,坐标变换

var drawing = document.getElementById('drawing');  if(drawing.getContext){    //获取绘图的上下文    var context  = drawing.getContext('2d');    //开始路径    context.beginPath();    //绘制外圆    context.arc(100,100,99,0,2*Math.PI,false);    //绘制内圆    context.moveTo(194,100);    context.arc(100,100,94,0,2*Math.PI,false);    //变化原点    context.translate(100,100);    //旋转指针//    context.rotate(1);    //绘制分针    context.moveTo(0,0);    context.lineTo(0,-85);    //绘制时针    context.moveTo(0,0);    context.lineTo(-65,0);    //绘制文本    context.font = 'bold 16px Arial';    context.textAlign = 'center';    context.textBaseline = 'middle';    context.fillText('12',0,-85);    //描边路径    context.stroke();  }


0 0
原创粉丝点击