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 如何判断一个字符是否是数字或字母

    在C++中, 可以用isdigit()判断一个字符是否是数字,可以用isalpha()判断一个字符是否是字母,还有很多,都在<cctype>头文件中 而类似的方法在JAVA中,则主要是Ch ...

  2. 解决安装oracle后系统变慢问题

    Oracle数据库是一个很占资源的软件,光一个实例服务所占内存,根据其安装时分配的内存就至少要达到256MB以上,再加上其他附属服务,光内存就要占用物理内存的400M左右,虚拟内存也会有等值或更高的损 ...

  3. 用typedef声明类型

    定义: 可以用typedef声明一个新的类型名来代替已有的类型名. 用法: typedef int INTEGER;//指定用标识符INTEGER代表int类型 typedef float REAL; ...

  4. Python 中的list小结

    list的下标和子list list的下表从零开始,和C语言挺类似的,但是增加了负下标的使用. -len-----第一个元素 ......       ...... -2 ------ 倒数第二个元素 ...

  5. D.6661 - Equal Sum Sets

    Equal Sum Sets Let us consider sets of positive integers less than or equal to n. Note that all elem ...

  6. java--偏向锁

    Java偏向锁(Biased Locking)是Java 6引入的一项多线程优化.它通过消除资源无竞争情况下的同步原语,进一步提高了程序的运行性能. 轻量级锁也是一种多线程优化,它与偏向锁的区别在于, ...

  7. Week6（10月14日）

    Part I:提问  =========================== 1.什么是视图模型?2.我们在留言本中,加入了一个怎样的视图模型?如何处理它? Part II:Ch05 视图模型 === ...

  8. vim常用操作技巧与配置

    vi是linux与unix下的常用文本编辑器,其运行稳定,使用方便,本文将分两部分对其常用操作技巧和配置进行阐述,其中参考了网上的一些文章,对作者表示感谢 PART1 操作技巧 说明: 以下的例子中  ...

  9. qt5_qml_Opengl_shader 第一弹----------------------openglunderqml的简化及介绍

    最近得知opengl可以通过纹理贴图来渲染yuv的数据,这就免去了yuv-rgb,这个过程在arm上还是很耗时间的,于是就接触了opengl. 写这篇文章的目的是方便初学者使用qml来调用opengl ...

  10. ASP.NET MVC 5 学习教程：修改视图和布局页

    原文 ASP.NET MVC 5 学习教程:修改视图和布局页 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 ...