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. JAVA中IO和异常处理练习

    1.SystemI\O练习:1)通过键盘输入若干字符,并通过显示器输出:2)定义一个静态方法validOrNot()用于对输入的字符进行合法性校验,若包含非英文字符,则抛出IllegalStringE ...

  2. Android apk逆向实战

    简介 逆向Android apk其实是一个分析Android apk的一个过程,必须了解Android程序开发的流程.结构.语句分支.解密原理等等. 功能 破解一个注册验证程序(自写一个简单的注册验证 ...

  3. 《数据通信与网络》笔记--虚电路网络：帧中继和ATM

    在之前的文章中已经介绍过虚电路交换,详细请参见:http://blog.csdn.net/todd911/article/details/9069447 这边介绍下使用虚电路交换的2中WAN技术:帧中 ...

  4. A - Oil Deposits(搜索)

    搜索都不熟练,所以把以前写的一道搜索复习下,然后下一步整理搜索和图论和不互质的中国剩余定理的题 Description GeoSurvComp地质调查公司负责探测地下石油储藏. GeoSurvComp ...

  5. 树莓派安装ftp服务器

    在树莓派安装ftp服务器,可上载＼下载文件 vsftpd是开源的轻量级的常用ftp服务器． 1,安装vsftpd服务器 (约400KB)sudo apt-get install vsftpd 2,启动 ...

  6. iOS判断字符串是否包含表情字符

    - (BOOL)isContainsEmoji:(NSString *)string { __block BOOL isEomji = NO; [, [string length]) options: ...

  7. SDRAM 控制器的解析

    本篇博文非原创,是整理了网上的各家之言与一体,为自己以后方便查询所用.如有冒犯请告之. 1.Precharge与Refresh的区别? plj:两者都是对存储单元的电容进行充电.回写.但差异在于: P ...

  8. AddSelf

    今天看     C语言深度深度解剖  第58页 看到了这么一段代码,就敲进了dev 谁知居然出现了个死循环.但是我不知道为什么. 贴出来,等有空了再请教别人好好分析,或者是网络上的高人指点一下 //d ...

  9. Android学习笔记：adb 与 adb shell操作 以及中文乱码解决

    1.安装app >adb install xxx.apk 2.卸载app >adb uninstall app的包路径 如:>adb uninstall com.example.my ...

  10. php三元运算

    $a = 2; $a == 1 ? $test="企业" : ($a==2 ? $test="地区" : $test="其他地方"); ec ...