使用canvas绘图学习

原创 2018年04月17日 18:28:06

1.想要按书中要求绘制一个时钟,如图所示:
这里写图片描述
实现代码如下:

<!DOCTYPE html>
<html>
<head>
   <title>canvas学习</title>
</head>
<body>
   <canvas  style="width="400px";height="400px;background: orange" id="drawing"></canvas>
</body>
<script type="text/javascript">
   var drawing = document.getElementById("drawing");
   //确定浏览器支持<canvas>元素
   if(drawing.getContext){

       var context = drawing.getContext("2d");
       //绘制文本
       context.font = "bold 14px Arial";
       context.textAlign = "center";
       context.textBaseline = "middle";
       context.fillText("12",100,20);

       //起点对齐
       context.textAlign = "start";
       context.fillText("12",100,40);

       //终点对齐
       context.textAlign = "end";
       context.fillText("12",100,60);

      //开始路径
     context.beginPath(); 
     context.arc(100,100,99,0,2*Math.PI);
          //注意可以通过lineWidth设置线条的宽度,还有lineCap控制线条末端的形状!
      //绘制内圆
      context.moveTo(194,100);
      context.arc(100,100,94,0,2*Math.PI,false);

      //绘制分针
      context.moveTo(100,100);
      context.lineTo(100,15);    

      //绘制时针
      context.moveTo(100,100);
      context.lineTo(35,100);

      context.fillStyle = "pink";
/*        context.fill();
*/
      context.strokeStyle = "red";
      //描边路径
      context.stroke();

   }

</script>

</html>

最终实际效果如图:
这里写图片描述

发现,修改canvas的大小,其时钟也随着画布的大小而变化,不应该会有这种怪异的事发生。找了很久才发现,实现过程中,我是通过style样式控制画布的大小,但是实际上后来绘圆时,是通过document文档对象模型进行操作,它只能对文档对象中的属性进行操作,并不能识别到样式文件中设置的大小,因此,我们绘制的圆是飘忽不定的。找到问题,修改即可。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Bonjourjw/article/details/79978840

web前端:Canvas 基础(一)

web前端:Canvas 基础(一)
  • itwangyang520
  • itwangyang520
  • 2017-11-01 18:02:44
  • 223

Android中Canvas绘图基础详解(附源码下载)

Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉绘图API。Android通过Canvas类暴露了很多drawXXX方法,我们可以通过这些方法绘制各种各样的图形。Canvas...
  • sunqunsunqun
  • sunqunsunqun
  • 2015-11-11 00:30:38
  • 31962

JavaScript:使用Canvas绘图

1、基本用法  要使用&amp;lt;canvas&amp;gt;元素,必须先设置其width和height属性,指定可以绘图的区域大小,出现在开始后结束标签中的内容是后备信息,如果浏览器不支持&am...
  • qq_27626333
  • qq_27626333
  • 2016-06-06 14:11:04
  • 17909

Android中Canvas绘图基础详解

  • 2015年11月11日 00:34
  • 6.25MB
  • 下载

html5中关于canvas标签用法(绘图)

HTML 5 标签 标签定义图形,比如图表和其他图像。 标签只是图形容器,您必须使用脚本来绘制图形。 用canvas配合javascript可以直接在html页面动态绘...
  • yunfuyiren
  • yunfuyiren
  • 2014-01-13 21:29:55
  • 1125

JavaScript基础——使用Canvas绘图

HTML5添加的最受欢迎的功能就是元素。这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形。元素最早是由苹果公司推出的,当时主要用在其Dashboard中。...
  • Goskalrie
  • Goskalrie
  • 2016-08-03 10:48:55
  • 2728

C# WPF Canvas绘图

//清除canvas画布 DrawCanvas.Children.Clear(); //直线对象 Line mydrawline = new Line(); mydrawline.Stroke= Br...
  • oHanTanYanYing
  • oHanTanYanYing
  • 2016-12-16 11:34:34
  • 2580

HTML5 canvas绘图基本使用方法

本文介绍了html5 中canvas标签的基本使用方法,详细讲解了其重要的属性和方法...
  • u014607184
  • u014607184
  • 2016-06-26 15:20:15
  • 41233

canvas、paint绘图

  • 2016年09月13日 09:59
  • 669KB
  • 下载

网页绘图(适配移动端)

网页绘图(已经适配移动端)
  • YangRunkangBla
  • YangRunkangBla
  • 2016-01-13 09:50:01
  • 726
收藏助手
不良信息举报
您举报文章:使用canvas绘图学习
举报原因:
原因补充:

(最多只允许输入30个字)