对应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. MySQL数据库的热备份和冷备份

    冷备份(off, 慢, 时间点上恢复)冷备份发生在数据库已经正常关闭的情况下,当正常关闭时会提供给我们一个完整的数据库.冷备份是将关键性文件拷贝到另外位置的一种说法.对于备份数据库信息而言,冷备份是最 ...

  2. HDU 1532 Drainage Ditches 最大流 （Edmonds_Karp）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1532 感觉题意不清楚,不知道是不是个人英语水平问题.本来还以为需要维护入度和出度来找源点和汇点呢,看 ...

  3. MVC引用CSS文件の正确姿势

    你的css文件目录结构: 将路径写入BundleConfig规则中: using System.Web; using System.Web.Optimization; namespace XXXX { ...

  4. 常见内部函数----Python

    In [10]: test = [1,2,"yes"] ---append(x) 追加到链尾 In [11]: test.append(1) In [12]: test Out[1 ...

  5. android studio中文乱码的解决方法【转】

    一． 在android的源文件中的乱码问题 Android Studio安装后发现所有的中文,不管是界面上的还是输出的log中的中文都变成小框框,具体的解决方法如下, 可以肯定是字体的问题 解决:菜单 ...

  6. 【转载】JavaEE权限管理分析

    JavaEE权限管理分析 一．背景 在 Web 应用开发中,安全一直是非常重要的一个方面.安全虽然属于应用的非功能性需求,但是应该在应用开发的初期就考虑进来.如果在应用开发的后期才考虑安全的问题,就可 ...

  7. 练习PYTHON协程之GREENLET

    STACKLESS就算了,了解一下原理即可. GREENLET,GEVENT,EVENTLET这些,比较好测试,还是都 撸一次,得个印象. 测试代码都是网上的大路货. from greenlet im ...

  8. SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-002-激活PROFILE、设置默认值、@ActiveProfiles

    一. Spring honors two separate properties when determining which profiles are active:spring.profiles. ...

  9. statspack系列8

    原文:http://jonathanlewis.wordpress.com/2006/12/27/analysing-statspack-8/ 作者:Jonathan Lewis 在前面的关于stat ...

  10. Entity Framework 学习初级篇2--ObjectContext类的介绍

    转自:http://www.cnblogs.com/Tally/archive/2012/09/14/2685014.html 本节,简单的介绍EF中的ObjectContext.ObjectQuer ...