[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编译快一点（增加基础头文件）
姚冬,中老年程序员 进藤光.杨个毛.欧阳修 等人赞同 我是来反对楼上某些答案的.我曾经用MFC写了金山词霸(大约20多万行),又用Qt写了YY语音(大约100多万行),算是对两种框架都比较有经验.纠正 ...
- 坚持Delphi的厂商与产品
能记一个算一个吧... 招商银行的企业网银是用Delphi开发的,听说招商有不少软件都是用Delphi开发的. 广州酷狗音乐招Delphi开发 对程序员来说,Delphi写的比较有名的软件莫过于Dev ...
- Android HttpClient get传递数组
url请求格式: String url = "http://10.80.7.26:" + +;
- velocity-1.7中vm文件的存放位置
velocity-1.7中关于vm文件存放 demo: public class App_example1 { public App_example1() { String propfile=&quo ...
- YII AR查询方法
ActiveRecord类文档:http://www.yiiframework.com/doc/guide/1.1/en/database.ar 对于一个Model Post 有如下的4中查询方法,返 ...
- C 语言函数指针
c代码: #include <stdio.h> int add(int x,int y); int subtract(int x,int y); int domath(int (*math ...
- JAVA实现word doc docx pdf excel的在线浏览 - 仿百度文库 源码
我们具体实现思路是这样的 首先下载并安装openoffice和swftools openoffice下载地址:http://www.openoffice.org/download/index.html ...
- BZOJ3166: [Heoi2013]Alo
3166: [Heoi2013]Alo Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 394 Solved: 204[Submit][Status] ...
- Apache搭建多个站点
如何用Apache搭建的网站系统上运行多个站点呢?最平常的大概有3种方法. 第一种:单IP不同端口 第二种:多IP同端口(独立IP的虚拟空间) 第三种:域名绑定根目录的方式(共享IP的虚拟空间) 下面 ...
- MVC Action 返回类型[转]
一. ASP.NET MVC 1.0 Result 几何? Action的返回值类型到底有几个?咱们来数数看. ASP.NET MVC 1.0 目前一共提供了以下十几种Action返回 ...