[Javascript] Drawing Paths - Lines and Rectangles
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="HTML5 Canvas Graphics and Animation Video 1" />
<meta charset="utf-8">
<title>HTML5 Canvas Graphics and Animation</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script src="app.js"></script>
</body>
</html>
/**
* Created by Answer1215 on 3/19/2015.
*/
window.onload = function() { //var canvas = $("#canvas")[0];
//var canvas = document.getElmenetByTagName("canvas")[0];
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 700; //context.fillRect(10, 10, 100, 200);
/**/
context.beginPath();
context.moveTo(100,100); //without draw any line;
context.lineTo(300, 100);
context.lineTo(300, 200);
context.lineTo(100, 200);
context.lineTo(100, 100); context.closePath();
context.stroke(); //context.fill(); //fill() will also close the path for you
//so if you use fill(), you don't need closePath(); but in case you forgot
//to close the path later, just remember to close it every times.
/**/ /**/
context.rect(100,100,100,300); //make a rect and stroke it
context.stroke(); context.fillRect(100,100,100,300); //fill rect
context.strokeRect(100,100,100,300); //draw rect
context.clearRect(100,100,100,300); //clean the canvas*/
};
[Javascript] Drawing Paths - Lines and Rectangles的更多相关文章
- [Javascript] Drawing Paths - Curves and Arcs
window.onload = function() { var canvas = document.getElementById("canvas"), context = can ...
- Java基础之在窗口中绘图——绘制直线和矩形（Sketcher 2 drawing lines and rectangles）
控制台程序. import javax.swing.JComponent; import java.util.*; import java.awt.*; import java.awt.geom.*; ...
- 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 ...
- 【转】Multithreaded Python Tutorial with the “Threadworms” Demo
The code for this tutorial can be downloaded here: threadworms.py or from GitHub. This code works wi ...
- 【Javascript】js图形编辑器库介绍
10个JavaScript库绘制自己的图表 jopen 2015-04-06 18:18:38 • 发布 摘要:10个JavaScript库绘制自己的图表 JointJS JointJS is a J ...
- direct2d: antialiasing and drawing a line with a 1 pixel stroke
http://xboxforums.create.msdn.com/forums/t/61448.aspx I'm currently porting a number of custom MFC C ...
- JavaScript In OA Framework
原文地址:JavaScript In OA Framework (需FQ) “To be or not to be…… is the question…..!” The famous soliloqu ...
- HTML5资料
1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...
随机推荐
- 李洪强漫谈iOS开发[C语言-035]-选择结构-与小结
- 使用Eclipse调试Android Native Application－－－cocos2d-x ＋ Eclipse + Android + ndk
纠结很多天的ndk 调试, 终于在 mac 下面顺利完成(注意在windows还是没弄成功,蛋疼...) 调试方法: 1:先google, ndk demo . 把ndk 最基本的hellword ...
- Linux内核spin_lock与spin_lock_irq分析
http://blog.csdn.net/zhanglei4214/article/details/6837697
- Altium Designer 常用快捷键总结
原理图:1:按住shift 拖动某个元件,可快速复制.2:按住鼠标滚轮 鼠标上下滑动 放大缩小.3:按住Ctrl 按住鼠标右键 鼠标上下滑动也放大缩小.4:按住Ctrl 拖动某个元件 可以移动位置 ...
- LinuxShell_variable+if+while
[root@ossec-server mybash]# vim ./hello.sh #! /bin/sh # This is a example bash script echo "Hel ...
- Android 开发绕不过的坑：你的 Bitmap 究竟占多大内存？
0.写在前面 本文涉及到屏幕密度的讨论,这里先要搞清楚 DisplayMetrics 的两个变量,摘录官方文档的解释: density:The logical density of the displ ...
- Service Oriented Architecture
What is Service Oriented Architecture (SOA)? There have been so many interpretations of this through ...
- 更换手机号或者更换手机后QQ设备锁的设置问题
更换手机号 一步到位,更改密保手机号,OK了 更换手机 老卡插入 登录QQ,OK了 更换手机号和手机 老卡插入新手机 登录QQ 新卡插入新手机 更改密保手机号,OK了
- 升级yosemite后java出错的解决
昨天升级mac os到yosemite后,因为是系统整体升级,有一些在设置会丢失,这是后话,先说说我在执行一个需要java参与的程序的时候得到如下错误: Error: JAVA_HOME is not ...
- java 页面url传值中文乱码的解决方法
parent.window.location.href 和 iframe中src的乱码问题.要在这两个url地址中传中文,必须加编码,然后再解码.编码:encodeURI(encodeURI(&quo ...