对应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. python【第十九篇】Django进阶

    1.路由系统优化 1.1 路由分发 前面我们已经知道,在工程名下的urls.py中写我们的路由映射关系,那么问题来了,假设我们有10个app,如果把所有的url映射都写在urls.py文件中,那么每一 ...

  2. 将yyyyMMdd HH:mm:ss格式的时间转换成时间类型

    DateTime.ParseExact(gmt_withdrawal, "yyyyMMddHHmmss", System.Globalization.CultureInfo.Cur ...

  3. Redis总录

    设计 选择合适的数据对象来存储对象:String,List,Hash(Entity角色对象),Set,Zset(需要排序): 选择存储是全局的,还是局部的: 机制 批处理(pipeline) 事务(w ...

  4. TCP/IP入门学习（1）---分层概述

    本文旨在记述一些学习中的笔记 OSI分层:应用层,表示层,会话层,传输层,网络层,数据链路层,物理层 详细点: 1.应用层:为应用程序提供服务并规定程序中通信相关细节. 2.表示层:将应用处理的信息转 ...

  5. hdu 1827

    强连通分量——tarjin算法: 这题的思路就是找出多少个出度为0的连通分量,结果就是这些连通分量的元素的最小值相加: 一道很简单的题,改了我好久,= =!~ 贴代码: #include<cst ...

  6. C#编译器对于dynamic对象到底做了什么

    private static void TestMethod() { //dynamic 仅仅是个占位符而已 dynamic p1 = , Y = }; //对dynamic对象p1的X属性访问通过C ...

  7. <1>数据引用与匿名存储

    引用本身就是一种标量变量 引用变量,如 $ra 或$rarray ,就是一种普通的标量变量,因为我们使用"$" 符号. 变量变量可以是一个整数,一个字符串或者一个引用,而且还可以被 ...

  8. 3.android下Makefile编写规范

    随着移动互联网的发展,移动开发也越来越吃香了,目前最火的莫过于android,android是什么就不用说了,android自从开源以来,就受到很多人的追捧.当然,一部人追捧它是因为它是Google开 ...

  9. Learning WCF Chapter1 Hosting a Service in IIS

    How messages reach a service endpoint is a matter of protocols and hosting. IIS can host services ov ...

  10. 查找mysql数据文件存放路径

    show variables like 'datadir%'; show variables当前的会话,是系统参数 是静态 show global variables全局 show status是系统 ...