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. wiki oi 1044 拦截导弹

    题目描述 Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某 ...

  2. iOS多线程中的单例

    #import "MyHandle.h" static MyHandle *handle = nil; @implementation MyHandle // 传统写法 // 此时 ...

  3. Android创建启动画面

    每一个Android应用启动之后都会出现一个Splash启动界面,显示产品的LOGO.公司的LOGO或者开发人员信息.假设应用程序启动时间比較长,那么启动界面就是一个非常好的东西,能够让用户耐心等待这 ...

  4. 公共 DNS server IP 地址

    公共 DNS server IP 地址 名称 DNS server IP 地址 CNNIC SDNS 1.2.4.8 210.2.4.8 114 DNS 114.114.114.114 114.114 ...

  5. Aqua Data Studio 查询结果中文乱码

    菜单条里[文件]-[选项]会弹出个选项对话框 然后选[一般]  在右边的[外观]以下找到[网格结果字体] 将字体类型改成宋体即可了 watermark/2/text/aHR0cDovL2Jsb2cuY ...

  6. LINQ简单案例

    1.在visual studio 创建一个解决方案,新建一个控制台程序Kong 2.新建两个类,分别为Master 类和Kongfu类  Master类中包含成员如下,并重写ToString方法 na ...

  7. [Swust OJ 352]--合并果子(贪心+队列模拟)

    题目链接:http://acm.swust.edu.cn/problem/352/ Time limit(ms): 1000 Memory limit(kb): 65535   Description ...

  8. javascript 数组部分

    <html> <body> <script type="text/javascript"> var arr = new Array(6) arr ...

  9. main函数的参数问题 （转载）

    void main(int arg ,char *arv[]){} arg -- 命令行参数总个数arv[0] -- 参数1,程序名 arv[1] -- 参数2,字符串 arv[2] -- 参数3,字 ...

  10. sizeof,一个其貌不扬的家伙(转)

    sizeof,一个其貌不扬的家伙,引无数菜鸟竟折腰,小虾我当初也没少犯迷糊,秉着“辛苦我一个,幸福千万人”的伟大思想,我决定将其尽可能详细的总结一下.但当我总结的时候才发现,这个问题既可以简单,又可以 ...