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. 数据结构——链表（linkedlist）

    基本分类: 1.单向链表 2.带尾指针的单向链表 3.双向循环链表 以下分类进行说明 1.单向链表 基本元素:*front //头节点 *next //下一节点 声明:node<T>*p; ...

  2. poj 3295 Tautology(栈)

    题目链接:http://poj.org/problem?id=3295 思路分析:判断逻辑表达式是否为永真式问题.根据该表达式的特点,逻辑词在逻辑变量前,类似于后缀表达式求值问题. 算法中使用两个栈, ...

  3. HH的军训（容斥）

    1248: HH的军训 时间限制: 1 Sec  内存限制: 128 MB 提交: 95  解决: 11 [提交][状态][讨论版] 题目描述 大学里,最难忘的事情莫过于军训了,白白的HH童鞋就被无情 ...

  4. keytool 生成 Android SSL 使用的 BKS

    我是在Mac(JDK 1.6) 环境下生成的,Windows  也应该通用; 首先要从CA那里申请来签名的证书,我的是crt格式的; 然后使用如下命令,对应的BcProvider 是 bcprov-e ...

  5. JVM 重排序

    在java代码到最终执行的指令序列的整个过程中,会出现重排序.也就是说最终执行的顺序并不是按照源代码执行的顺序来进行的. 其中1为编译器的优化重排序,2,3是处理器的重排序. 数据依赖 如果两个操作访 ...

  6. Cannot drop the database ‘XXX’ because it is being used for replication.

    删除订阅数据库的时候出现下面的错误: Cannot drop the database ‘XXX’  because it is being used for replication. 数据库的状态为 ...

  7. Android PopupWindow显示位置和显示大小

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3l1YW41MTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  8. 查看死锁原因 /data/anr/traces.txt

    Android ANR这个错误大家并不陌生,但是从Android 2.2开始出错的ANR信息会自动上传给Google进行系统分析改进,当然了你的应用ANR错误其实保存在一个文件中,在/data/anr ...

  9. WinForm - 格式化DataGridView单元格数据

    效果: 代码: /// <summary> /// 格式化数据 /// </summary> private void dataGridView1_CellFormatting ...

  10. powerMock比easyMock和Mockito更强大（转）

    powerMock是基于easyMock或Mockito扩展出来的增强版本,所以powerMock分两种类型,如果你习惯于使用easyMock的,那你就下载基于easyMock的powerMock,反 ...