window.onload = function() {

    var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"); context.beginPath();
context.moveTo(0,300); for(var x = 1; x < 300; x++){
var y = 300 + Math.sin(x * 0.02) *100;
context.lineTo(x,y);
} context.stroke();
};

quadraticCurveTo() & bezierCurveTo():

 

window.onload = function() {

    var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"); var p0 = {
x: Math.random() * 600,
y: Math.random() * 600
}; var p1 = {
x: Math.random() * 600,
y: Math.random() * 600
}; var p2 = {
x: Math.random() * 600,
y: Math.random() * 600
}; context.beginPath();
context.moveTo(p0.x, p0.y);
context.quadraticCurveTo(p1.x, p1.y, p2.x, p2.y);
context.stroke();
context.closePath(); drawPoint(p0);
drawPoint(p1);
drawPoint(p2); function drawPoint(p) {
context.fillRect(p.x - 4, p.y - 4, 8, 8);
} };

window.onload = function() {

    var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"); var p0 = {
x: Math.random() * 600,
y: Math.random() * 600
}; var p1 = {
x: Math.random() * 600,
y: Math.random() * 600
}; var p2 = {
x: Math.random() * 600,
y: Math.random() * 600
}; var p3 = {
x: Math.random() * 600,
y: Math.random() * 600
}; context.beginPath();
context.moveTo(p0.x, p0.y);
context.bezierCurveTo( p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
context.stroke();
context.closePath(); drawPoint(p0);
drawPoint(p1);
drawPoint(p2);
drawPoint(p3); function drawPoint(p) {
context.fillRect(p.x - 4, p.y - 4, 8, 8);
} };

window.onload = function() {

    var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"); context.beginPath();
context.arc(200,200,100,0,2);
context.stroke();
context.closePath(); context.beginPath();
context.arc(400,400,100,0,2, true);
context.stroke();
context.closePath(); };

window.onload = function() {

    var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"); context.beginPath();
context.arc(300,300,100,0, Math.PI * 2);
context.stroke();
context.closePath(); };

[Javascript] Drawing Paths - Curves and Arcs的更多相关文章

  1. [Javascript] Drawing Paths - Lines and Rectangles

    <!DOCTYPE html> <html> <head> <meta name="description" content=" ...

  2. JavaScript Learning Paths(ES5/ES6/ES-Next)

    JavaScript Learning Paths(ES5/ES6/ES-Next) JavaScript Expert refs https://developer.mozilla.org/en-U ...

  3. [Javascript] Drawing Styles on HTML5 Canvas

    window.onload = function() { var canvas = document.getElementById("canvas"), context = can ...

  4. 【Javascript】js图形编辑器库介绍

    10个JavaScript库绘制自己的图表 jopen 2015-04-06 18:18:38 • 发布 摘要:10个JavaScript库绘制自己的图表 JointJS JointJS is a J ...

  5. HTML5资料

    1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...

  6. leaflet地图库

    an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...

  7. GDI+ Tutorial for Beginners

    原文 GDI+ Tutorial for Beginners GDI+ is next evolution of GDI. Using GDI objects in earlier versions ...

  8. IGeometryCollection Interface

    Come from ArcGIS Online IGeometryCollection Interface Provides access to members that can be used fo ...

  9. HTML <canvas> 学习笔记

    Professional JavaScript for Web Developers    P552 Basic Usage The <canvas> element requires a ...

随机推荐

  1. SQL按日期Datatime来比较大小

    数据库操作中,通常需要选择某日期以后的记录,比如选择10年1月到11年2月之间的记录,此时用SQL语句编写时,不能直接用">.<.="来选择,因为datetime型数据 ...

  2. java.sizeOf

    Introduction With java.SizeOf you can measure the real memory size of your Java objects. Download it ...

  3. linux多线程驱动中调用udelay()对整个系统造成的影响(by liukun321咕唧咕唧)

    以前没考虑过这个问题,而且之前可能运气比较好,虽然用了udelay但也没出什么奇怪的问题,今天在 CSDN上看到了一篇关于此问题帖子,觉得很受用,再此做简要的记录和分析: 驱动开的是内核线程 跟普通进 ...

  4. C++11 中的线程、锁和条件变量

    转自:http://blog.jobbole.com/44409/ 线程 类std::thread代表一个可执行线程,使用时必须包含头文件<thread>.std::thread可以和普通 ...

  5. oracle的一种字符串处理机制。

    orcale会把空字符串当成Null进行存储,sqlserver直接存储空字符串

  6. WebChart网页局域网聊天系列(一):ActiveX插件编写

    第一步:创建ActiveX控件类库,在解决方案中右击添加Window窗体控件库 在该类库属性中,设置 使程序集COM可见,同时设置为COM互操作注册 另外在自动生成的文件中AssemblyInfo.c ...

  7. SQL Server登录 18456错误

    1.以windows验证模式进入数据库管理器. 第二步:右击sa,选择属性: 在常规选项卡中,重新填写密码和确认密码(改成个好记的).把强制实施密码策略去掉. 第三步:点击状态选项卡:勾选授予和启用. ...

  8. sqliteExpert软件使用(创建数据库和表)

    sqliteExpert是sqlite数据库的可视化操作软件,通过该软件可以进行可视化的创建数据库以及表,免去了复杂的建表语句.首先在下面地址下载该软件http://www.ddooo.com/sof ...

  9. Servlet能读到JSessionID,读不到其它cookie问题

    Servlet的Cookie值保存与获取 今天测试设置和获取Cookie遇到了一点小问题,很奇怪的问题: 把J2ee服务部署在本地 8080端口:访问任何一个服务时,如果客户端没有cookie,则下发 ...

  10. Memcached 两款.NET客户端的郁闷事儿

    不久以后就要负责一个比较大的项目,有多大?反正就是挺大的.现在处于筹备阶段,我主要负责系统框架搭建,在系统缓存这一块决定采用Http运行时缓存+memcached. memcached 以前用过几次 ...