[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 ...
随机推荐
- eclipse+tomcat7解决项目中文乱码的一个思路
1. 在代码层面进行编码的修改操作,参考博文的方法一:http://www.cnblogs.com/longshiyVip/p/4873058.html 2. 如果项目使用了struts2等前端框架, ...
- 获取GridView的BoundField值
我们在使用 GridView 控件展示列表时,如果需要获取 BoundField 的值,可以使用 GridView1.Rows[i].Cells[j].Text. 举个例子: 前台: <html ...
- laravel 模板 blade
控制器布局 在Laravel框架中使用模板的一种方法就是通过控制器布局.通过在控制器中指定 layout 属性,对应的视图会被创建并且作为请求的默认返回数据. 在控制器中定义一个布局 class Us ...
- linux 文件、文件夹的重命名命令
linux中没有重命名命令,一般用mv替代.如将test更名为testsmv test tests隐藏是mv test .test 说到文件的隐藏,linux下文件如果想隐藏起来只要重命名这个文件就可 ...
- gtest的安装和测试[good]
一.前言 本篇将介绍一些gtest的基本使用,包括下载,安装,编译,建立我们第一个测试Demo工程,以及编写一个最简单的测试案例. 二.下载 如果不记得网址, 直接在google里搜gtest,第一个 ...
- windows 上rails3.2 + ruby1.9环境搭建
题外话:本文是通过参考网友资料,亲自尝试过后写的,有不对之处,还请网友指正! 1.搭建环境 准备ruby1.9.3 下载地址: 下载地址:http://rubyforge.org/frs/?group ...
- 【HDOJ】1238 Substrings
深搜+剪枝,简单字符串. #include <stdio.h> #include <string.h> #define MAXLEN 105 #define MAXNUM 10 ...
- 应付描述性弹性域 Description Flexfield
(N) AP > Setup > Flexfield > Description > Segments To define your descriptive flexfield ...
- 机器学习&深度学习经典资料汇总,data.gov.uk大量公开数据
<Brief History of Machine Learning> 介绍:这是一篇介绍机器学习历史的文章,介绍很全面,从感知机.神经网络.决策树.SVM.Adaboost到随机森林.D ...
- OpenSSL 拒绝服务漏洞
漏洞名称: OpenSSL 拒绝服务漏洞 CNNVD编号: CNNVD-201312-058 发布时间: 2013-12-05 更新时间: 2013-12-05 危害等级: 漏洞类型: 威胁 ...