对应HTML

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>canvas</title>

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

     </head>

     <body>

         <canvas id="div_1">

         </canvas >

         <script>

             aa();

         </script>

     </body>

 </html>

对应JavaScript

 function aa(){

     var c = document.getElementById("div_1");

     var cxt=c.getContext("2d");

     cxt.fillStyle="#FF0000";

     cxt.fillRect(10,10,50,30); //左上角10px处100*50的矩形

     cxt.strokeStyle='#FF0000';

     cxt.moveTo(60,10);

     cxt.lineTo(80,25);

     cxt.lineTo(60,40);

     cxt.stroke();

     cxt.fillStyle="#000000";

     cxt.beginPath();

     cxt.arc(80,25,2,0,Math.PI*2,true);

     /*第一个和第二个参数,代表圆心坐标.

     第三个参数是圆的半径.第四个参数代表圆周起始位置.0

     就是起始位置.沿顺时针路线,分别是0.5 PI（正下方）,1 PI和1.5 PI（正上方）,

     为画饼图提供了扇形范围的依据.第五个参数是弧长Math.PI*2就是整个圆,

     Math.PI是半圆.第六个参数是一个布尔值,true是顺时针false是顺时针.*/

     cxt.closePath();

     cxt.fill();

 }

运行结果

canvas绘制简单小铅笔的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. 使用Canvas绘制简单的时钟控件

    Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和F ...

  3. canvas绘制简单图形

    canvas绘图篇: canvas绘制矩形: <!DOCTYPE html> <html> <head lang="en"> <meta ...

  4. JavaScript动画基础：canvas绘制简单动画

    动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

  5. [HTML5] Canvas绘制简单图片

    获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawImage()方法,参数:Image对象,x坐标, ...

  6. [HTML5] Canvas绘制简单形状

    使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...

  7. canvas绘制简单的霓虹灯效果

    canvas简单动画分为三个步骤: 1.清除画布区域的内容: 2.重绘: 3.执行requestAnimationFrame(); 这个霓虹灯效果的demo,我没有用requestAnimationF ...

  8. canvas绘制多角形小练习

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

随机推荐

  1. WPF 得一些问题汇总

    1.CallMethodAction <TextBox Height="30" Name="txtUserName" Width="160&qu ...

  2. Flume用来收集日志，zeppelin用来展示

    Flume:Flume是一个分布式,可依赖的,用于高效率的收集.聚类.移动大量数据的服务.Flume使用基于流数据的简单而且可扩展的架构.由于拥有可调的依赖机制和许多故障恢复机制,Flume是健壮而且 ...

  3. lucene开发序之luke神器

    lucene是一款很优秀的全文检索的开源库,目前最新的版本是lucene4.4,关于lucene的历史背景以及发展状况,在这里笔者就不多介绍了,如果你真心想学习lucene,想必在这之前你已经对此作过 ...

  4. datagridview用get，set访问并加锁，可以控制所有使用datagridview的地方都顺序进行访问

    public System.Windows.Forms.DataGridView dataGridView1 { get { lock (ojb) { return dataGridView; } } ...

  5. 开源CMS赏析

    国内CMS产品有很多,开源的产品也不少,大概的可分为以下几类: .NET开源产品:We7CMS: PHP开源产品:Dede CMS.PHP CMS和帝国CMS: ASP开源产品:动易SiteFacto ...

  6. Java NIO回炉

    重回东软了,据说可能要做一个跟文件相关的项目,于是决定把Java NIO的内容再捡起来,看看. 为什么要使用NIO,其实在低连接数的情况下,NIO的性能是要低于IO的:但是在高并发的情况下,确实NIO ...

  7. hdu 4433

    一道dp题,虽然知道是dp,但是不会做: 学习了ACM_cxlove大神的代码,终于明白了: 搬运工: dp[i][j][k]表示 前i个已经完全匹配,而这时候,第i+1个已经加了j位,第i+2位已经 ...

  8. linux网络配置正确，能够ping通内网地址，无法打开外网网页

    在虚拟机里面装了linux后,发现内网能访问,外网访问不了. 首先确定网络配置没有问题,并且能够访问外网,通过以下方法进行确认: [root@localhost ~]# more /etc/sysco ...

  9. Golang全接触

    满打满算, 从好友推荐Golang至发文时, 使用Golang已经有1年多了. 这种时间对于C/C++ Java这些老者来说, 简直是菜鸟级别的经验 但作为新生代语言的特点就是实战. Golang这一 ...

  10. 【Xamarin挖墙脚系列：如何从一个Apk程序转化为Xamarin的程序】

    原文:[Xamarin挖墙脚系列:如何从一个Apk程序转化为Xamarin的程序] 工欲善其事必先利其器:工具下载:http://pan.baidu.com/s/1skxjwgH 接下来,我用个小的应 ...