canvas基本绘图

<!DOCTYPE html>

<html>

<body>

<meta charset="utf-8">

<canvas id="myCanvas" width="500" height="500">

你的浏览器不支持HTML5

</canvas>

<P>你好，世界</p>

<script type="text/javascript">

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

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

ctx.lineWidth=10;

ctx.strokeStyle="red";

ctx.lineCap="round";

ctx.beginPath();

ctx.moveTo(10,10);

ctx.lineTo(150,50);

ctx.stroke();

ctx.strokeRect(50,60,20,30);

ctx.fillStyle="green";

ctx.beginPath();

ctx.fillRect(65,75,90,70);

ctx.stroke();

ctx.lineWidth=3;

ctx.strokeStyle="red";

ctx.beginPath();

ctx.arc(300,300,100,0,360*Math.PI/180,true);

ctx.stroke();

ctx.beginPath();

ctx.arc(300,300,50,0,160*Math.PI/180,true);

ctx.stroke();

</script>

</body>

</html>

效果:

HTML&JS笔记(1)的更多相关文章

  1. Data Visualization and D3.js 笔记(1)

    课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...

  2. js笔记-0

    #js笔记-0 数组: indexOf方法: Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexO ...

  3. PPK谈JS笔记第一弹

    以下内容是读书笔记,再一次温习JS好书:PPK谈JS window.load＝initializePageaddEventSimple('window','load',function(){}) lo ...

  4. 面向小白的JS笔记 - #Codecademy#学习笔记

    前言 最初浏览过<JavaScript秘密花园>,前一段时间读过一点点<JavaScript语言精粹>和一点点<JavaScript高级程序设计>(一点点是指都只是 ...

  5. require.js笔记

    笔记参考来源:阮一峰  http://www.ruanyifeng.com/blog/2012/10/javascript_module.html   1. 浏览器端的模块只能采用“异步加载”方式 = ...

  6. JS笔记 入门第四

    小测试: 注意:取消所有的设定可以直接使用 document.getElementById("txt").removeAttribute("style"); 这 ...

  7. JS笔记 入门第二

    输出内容 document.write(); alert("hello!"); alert(mynum); </script> 注:alert弹出消息对话框(包含一个确 ...

  8. Node.js笔记1

    Node.js入门笔记 1. node -help 可以显示帮助信息2. node REPL 模式(Read-eval-print loop) 输入—求值—输出循环 直接在cmd输入node 可以进入 ...

  9. JS笔记 入门第一

    WHY? 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现 ...

  10. 奇舞js笔记——第0课——如何写好原生js代码

    摘要 1.好的代码职责要清晰,javscript不要用来操作样式: 2.API要设计的合理:通用性,适度的抽象(数据抽象,过程抽象),可扩展性: 3.效率问题:用好的.合适的算法(前端程序员要把自己当 ...

随机推荐

  1. HDU 4825 Xor Sum 字典树+位运算

    点击打开链接 Xor Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others) ...

  2. gdal库的三个使用心得

    作者:朱金灿 来源:http://blog.csdn.net/clever101 最近使用gdal库比较多,就谈谈gdal库的一些使用心得. 第一个是GDALOpen的访问权限参数会影响图像的创建金字 ...

  3. 请问set JAVA_OPTS的各项參数是什么意思？

    http://topic.csdn.net/u/20090910/10/20c6ba01-28ac-482e-94b2-bfce0a952f77.html 请问set JAVA_OPTS的各项參数是什 ...

  4. Codeforces 482 - Diverse Permutation 构造题

    这是一道蛮基础的构造题. - k         +(k - 1)      -(k - 2) 1 + k ,    1 ,         k ,             2,    ....... ...

  5. 搞清楚学习Web的目的，是为了推广自己的产品和服务，不是为了替人接单做网页

    只有这样,Web才不会沉沦于下流,才会对自己的事业有真正的帮助-

  6. pojg2744找一个最长的字符串x，使得对于已经给出的字符串中的任意一个y，x或者是y的子串，或者x中的字符反序之后得到的新字符串是y的子串。

    http://poj.grids.cn/practice/2744 描述现在有一些由英文字符组成的大小写敏感的字符串,你的任务是找到一个最长的字符串x,使得对于已经给出的字符串中的任意一个y,x或者是 ...

  7. 凡客副总裁崔晓琦离职 曾负责旗下V+商城项目_科技_腾讯网

    凡客副总裁崔晓琦离职 曾负责旗下V+商城项目_科技_腾讯网 凡客副总裁崔晓琦离职 曾负责旗下V+商城项目 腾讯科技[微博]乐天2013年09月18日12:44 分享 微博 空间 微信 新浪微博 邮箱 ...

  8. 解决struts2中UI标签出现的问题： The Struts dispatcher cannot be found

    解决struts2中UI标签出现的问题: The Struts dispatcher cannot be found 异常信息: The Struts dispatcher cannot be fou ...

  9. 一步一步重写 CodeIgniter 框架 (10) —— 使用 CodeIgniter 类库（续）

    上一节简单实现了 CI 的类库扩展模型,所以 _ci_load_class 和 _ci_init_class 写的不是很完备.根据上节课的分析,当 system/libraries 目录下存在 Ema ...

  10. ASP.NET过滤器的应用

    在J2EE Web开发中有过滤器filter,该filter可以对指定的URL访问进行拦截,并执行过滤器的方法,根据实际应用情况,在过滤器中修改请求的代码.判断会话信息,也可以做权限控制,总之这个过滤 ...