[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 ...
随机推荐
- HDOJ多校联合第五场
1001 Inversion 题意:求逆序对,然后交换k次相邻的两个数,使得剩下的逆序对最少. 分析:题目用到的结论是:数组中存在一对逆序对,那么可以通过交换相邻两个数使得逆序对减少1,交换k次,可以 ...
- 获取本机的ip
https://4sysops.com/archives/ipv6-tutorial-part-6-site-local-addresses-and-link-local-addresses/ In ...
- WordPress FunCaptcha插件跨站脚本漏洞
漏洞名称: WordPress FunCaptcha插件跨站脚本漏洞 CNNVD编号: CNNVD-201311-431 发布时间: 2013-11-29 更新时间: 2013-11-29 危害等级: ...
- Poj3680 Intervals
这题比较经典,题意大致上就是给你n个点和m个区间,每个区间有一个正权值,让你选出一些区间,使得每个点都不会被覆盖超过k次,且选出的区间权值和最大. -------------------------- ...
- C#检验数据有效性验证类
using System; using System.Text; using System.Text.RegularExpressions; namespace Dachie.Common { /// ...
- json-lib反序列化时(JSONObject.toBean)，时间类型为空的处理
需求: 在我们的项目里希望JsonString传入日期类型值为空时,JSONObject.toBean时可以将Java对象的该日期属性设为null. 解决过程: json-lib反序列化Json字符串 ...
- [Andrew]Ext.Net常用布局（Border布局）
@(Html.X().Window().Width(600).Height(400).Layout(LayoutType.Border) .Items(p => { p.Add(Html ...
- python模拟登录人人网
参考: http://www.cnblogs.com/txw1958/archive/2012/03/12/2392067.html http://www.cnblogs.com/chenyg32/a ...
- 【获取图像处理源码以及编译过程】在window下make。
google 找算法 发现一片不错论文,google作者的主页 找到了相关代码: http://cs.nyu.edu/~ccouprie/code.html code部分--------------- ...
- 【原】数据库SQL语句入门
1.数据定义DDL(Data Definition Language)语言即对表结构的一些定义,主要包括动词为CREATE/DROP/ALTER. 1.1.CREATE语句 CREATE TABLE ...