[Javascript] Drawing Paths - Curves and Arcs
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的更多相关文章
- [Javascript] Drawing Paths - Lines and Rectangles
<!DOCTYPE html> <html> <head> <meta name="description" content=" ...
- JavaScript Learning Paths(ES5/ES6/ES-Next)
JavaScript Learning Paths(ES5/ES6/ES-Next) JavaScript Expert refs https://developer.mozilla.org/en-U ...
- [Javascript] Drawing Styles on HTML5 Canvas
window.onload = function() { var canvas = document.getElementById("canvas"), context = can ...
- 【Javascript】js图形编辑器库介绍
10个JavaScript库绘制自己的图表 jopen 2015-04-06 18:18:38 • 发布 摘要:10个JavaScript库绘制自己的图表 JointJS JointJS is a J ...
- HTML5资料
1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...
- leaflet地图库
an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...
- GDI+ Tutorial for Beginners
原文 GDI+ Tutorial for Beginners GDI+ is next evolution of GDI. Using GDI objects in earlier versions ...
- IGeometryCollection Interface
Come from ArcGIS Online IGeometryCollection Interface Provides access to members that can be used fo ...
- HTML <canvas> 学习笔记
Professional JavaScript for Web Developers P552 Basic Usage The <canvas> element requires a ...
随机推荐
- [Gauss]POJ1753 Flip Game
题意:给4×4的棋盘的初始状态,b代表黑,w代表白. 要求变成全黑或者全白 最少需要几步. 简单的做法 可以暴搜 状压bfs 不再赘述 主要学习Gauss做法 同样是01方程组 用异或解 注意全黑或全 ...
- ANDROID_MARS学习笔记_S01原始版_008_Handler(异步消息处理机制)
一.流程 1.点击按钮,则代码会使handler把updateThread压到队列里去,从而执行updateThread的run() 2.run()里会通过msg.arg1 = i 和bundle来写 ...
- 对GBK的理解(内附全部字符编码列表):扩充的2万汉字低字节的高位不等于1,而且还剩许多编码空间没有利用
各种编码查询表:http://bm.kdd.cc/ 由于GB 2312-80只收录6763个汉字,有不少汉字,如部分在GB 2312-80推出以后才简化的汉字(如“啰”),部分人名用字(如中国前总理朱 ...
- SLF4J user manual
http://www.slf4j.org/manual.html The Simple Logging Facade for Java (SLF4J) serves as a simple facad ...
- hbase安装(zookeeper等)
文库:http://wenku.baidu.com/link?url=5mnYL7ZuxUBWZnrnmak4JRVF5fJquJmjgmZy788i7UW8lUk4QXD8Nc_haPz33vjt9 ...
- 监控Nginx负载均衡器脚本
1.编写脚本 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 vim nginx_pid.sh #!/bin/bash while : do nginxpid=`ps -C ...
- poj1160Post Office(DP)
http://poj.org/problem?id=1160 算水过的吧 四重循环没优化 CZ说爆可过 就爆了 dp[i][j] = min(dp[i][j],dp[i-1][g]-s) 第i个点建在 ...
- Linux Kernel ‘exitcode_proc_write()’函数本地缓冲区溢出漏洞
漏洞名称: Linux Kernel ‘exitcode_proc_write()’函数本地缓冲区溢出漏洞 CNNVD编号: CNNVD-201311-061 发布时间: 2013-11-07 更新时 ...
- ArchLinux安装开源VMware Tools
首先按照传统的Linux下安装VMware Tools的方法[1]]出现了很多的错误,安装过程完全没有办法进行下去.我在ArchLinux Wiki中看到这样一句说:VMware Tools for ...
- Node.js 创建第一个应用
如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个"接收 HTTP 请求并提供 ...