[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 ...
随机推荐
- linux-0.11内核 任务的堆栈切换
http://blog.163.com/di_yang@yeah/blog/static/86118492201212534924900/ 一直缠绕的两个问题:怎样标识的内核栈与用户栈?如何在内核态堆 ...
- Web开发-表单验证
表单验证是Web开发中必不可少的一个环节,用来限制用户输入数据的规范和一致性.那么如何能够简化这一任务,让开发人员通过简单的属性设置就能达到目的呢? FineUI在这一点上也是下足了功夫,比Asp.N ...
- 165. Compare Version Numbers
题目: Compare two version numbers version1 and version2.If version1 > version2 return 1, if version ...
- Android 应用自动更新功能的代码
由于Android项目开源所致,市面上出现了N多安卓软件市场.为了让我们开发的软件有更多的用户使用,我们需要向N多市场发布,软件升级后,我们也必须到安卓市场上进行更新,给我们增加了工作量.因此我们有必 ...
- 如何查看跟踪查看LINUX内核中的源码
我的博客:www.while0.com 最近看LINUX书籍时,根据书中代码找相应的函数或者结构定义相当吃力,根据网上资料按以下方法查找速度较快. 1.安装ctags 在源代码目录下运行 ctags ...
- jni.h头文件详解二
作者:左少华 博客:http://blog.csdn.net/shaohuazuo/article/details/42932813 转载请注明出处:http://blog.csdn.net/shao ...
- ☀【JS】eval
避免使用 eval <!doctype html> <html lang="zh-CN"> <head> <meta charset=&q ...
- apache开源项目-- NiFi
Apache NiFi 是一个易于使用.功能强大而且可靠的数据处理和分发系统.Apache NiFi 是为数据流设计.它支持高度可配置的指示图的数据路由.转换和系统中介逻辑. 架构: 集群管理器: 主 ...
- eight - zoj 1217 poj 1077
学习了多位大牛的方法,看看到底能把时耗降到多少? A* // zojfulltest: 30000ms # include <stdio.h> # include <ctype.h& ...
- 【转】【教程】实现Virtualbox中的XP虚拟机和主机Win7之间的共享文件夹
原文网址:http://www.crifan.com/add_share_folder_for_virtualbox_guest_xp_and_host_win7/ 已经实现了在主机Win7下,在Vi ...