[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 ...
随机推荐
- 【大话QT之十】实现FTP断点续传（需要设置ftp服务器为“PASV”被动接收方式）
应用需求: 网盘开发工作逐步进入各部分的整合阶段,当用户在客户端修改或新增加一个文件时,该文件要同步上传到服务器端对应的用户目录下,因此针对数据传输(即:上传.下载)这一块现在既定了三种传输方式,即: ...
- IPAddress
Console.WriteLine("BitConverter.IsLittleEndian = {0}", BitConverter.IsLittleEndian); Conso ...
- WCF - Self Hosting
WCF - Self Hosting Here, the WCF service is hosted in a console application. Given below is the proc ...
- VS2012、VS2010、VS2008常用的快捷键
下面为大家带来VS各个版本常用的快捷方式,希望对大家开发过程中有帮助: 强迫智能感知:Ctrl+J: 强迫智能感知显示参数信息:Ctrl-Shift-空格: Ctrl+E,D ----格式化全部代码 ...
- Win32下 Qt与Lua交互使用（一）：配置Qt下Lua运行环境
偶然间看到Lua这种脚本语言,有点兴趣,简单学习了一下. 发现Lua与C++之间可以实现非常强的交互性.Lua中可以使用C++中的函数,C++中也可以使用Lua中的函数.由此可以引发出很多奇思妙想了. ...
- C# 配置文件读取与修改
C# 配置文件读取与修改 配置文件在很多情况下都使用到, 配置文件分为两种 一种是应用程序的配置文件, 一种是web的配置文件. 两种配置文件最大的区别是web的配置文件更新之后会实时更新, 应用 ...
- 万科北京区域V-learn发布 系V-LINK产品系中首批产品
继今年4月发布了V-LINK万科社区服务商2.0升级版本后,万科北京区域再次迎来了品牌大动作.近日,北京万科正式发布“V-LINK”产品系中的首批产品“V-learn”相关战略. 全品类教育模式 据介 ...
- 【原】Spark on YARN
在YARN上运行Spark 在Spark0.6.0版本开始支持YARN模式,随后的版本在逐渐地完善. 在YARN上启动Spark 确保HADOOP_CONF_DIR或YARN_CONF_DIR属性的值 ...
- C++之内部类（嵌套类）与外部类及友元
本人能力.精力有限,所言所感都基于自身的实践和有限的阅读.查阅,如有错误,欢迎拍砖,敬请赐教——博客园:钱智慧. 先上代码: class Outer { public: Outer(){m_outer ...
- 【JS】Beginner9:Arrays
1.Lists of any kind of data 2.Index to retreve an element from the array 0 3.[] .length; .pop()/push ...