[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 ...
随机推荐
- [状压dp]HDU5045 Contest
题意: n和人做m道题, 每俩人做的题数不能相差一题以上.(也就是每n道题分别由n个人完成) 给n个人分别做m道题的概率, 求完成m题的最大期望 $1\le N \le 10$ 注意!!! fil ...
- C#中使用正则表达式提取超链接地址的集中方法(转)
一般在做爬虫或者CMS的时候经常需要提取 href链接或者是src地址.此时可以使用正则表达式轻松完成. Regex reg = new Regex(@"(?is)<a[^>]* ...
- Using FireMonkey Layouts
FireMonkey has many layout controls to choose from. Come learn the differences and how to use them t ...
- net中System.Security.Cryptography 命名空间 下的加密算法
.net中System.Security.Cryptography命名空间 在.NETFramework出现之前,如果我们需要进行加密的话,我们只有各种较底层的技术可以选择,如 Microsoft C ...
- BZOJ_3039_玉蟾宫_(动态规划+悬线法)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=3039 n*m的矩阵由R和F组成,求全是F的子矩阵的大小的三倍. 分析 悬线法: 浅谈用极大化思 ...
- 【转】IOS 怎么获取外设的广播数据AdvData
原文网址:http://www.deyisupport.com/question_answer/wireless_connectivity/bluetooth/f/103/t/73443.aspx N ...
- JS正则表达式验证数字非常全
<script type="text/javascript"> function validate(){ var reg = new RegExp("^[0- ...
- WCF 第五章 会话级别的实例
会话在分布式应用程序中广泛用于维护每个用户的状态.在站点或者基于站点的应用中,将每个用户的状态存储于会话中很常见.这这些情况中,用户和会话间有一个1:1比例.WCF以一个类似的概念支持服务.使用Ins ...
- HDU2520 我是菜鸟，我怕谁
http://acm.hdu.edu.cn/showproblem.php?pid=2520 我是菜鸟,我怕谁 Time Limit: 2000/1000 MS (Java/Others) Memor ...
- xilinx cpld XC95144XL 最小系统板
手上有几块xilinx的CPLD芯片XC95144,闲着无聊,打样的几块板子回来玩玩. 全部引脚引出,外接4个LED灯和一个Power灯,做成了50mm*50mm的板子,省钱(O(∩_∩)O). 下面 ...