canvas 一基础学习

/**
 * canvas
 * fillRect(L,T,W,H) 默认颜色为黑色
 * strokeRect(L,T,W,H) 带边框的黑色
 * 		默认1像素的黑色边框,显示出两像素的原因:边框从坐标中间平均分配,但是不能显示半个像素,默认会补全,所以...就显示两个像素
 *
 * 设置绘图:
 * fillStyle
 * strokeStyle
 * lineWidth
 * 边界绘制
 * lineJion:边界连接点样式
 * 			miter(默认)、round(圆角)、 bevel(斜角)
 * lineCap :端点样式
 * 			butt(默认)、round(圆角)、square(高度多出为宽一半的值)
 * 绘制路径
 * beginPath
 * closePath
 * moveTo
 * lineTo
 * stroke 划线,默认黑色
 * fill   填充,默认黑色
 * rect  矩形区域
 * clearRect 删除一个画布的矩形区域
 * save 保存路径
 * restore 回复路径
 */
var canvas = document.getElementById('canvas');
//矩形
var draw = canvas.getContext('2d');
draw.fillRect(100,100,200,200);
draw.strokeRect(100.5,100.5,200,200); 

// // 划线
draw.beginPath();
draw.moveTo(50,50);
draw.lineTo(300,300);
draw.lineTo(300,400);
draw.closePath();
draw.stroke();

//鼠标移动划线
canvas.onmousedown = function(ev){
	var ev = ev || event;
	draw.moveTo(ev.clientX - canvas.offsetLeft,ev.clientY-canvas.offsetTop);
	document.onmousemove = function(ev){
		var ev = ev || event;
		draw.lineTo(ev.clentX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
		draw.stroke();
	}
	document.onmouseup = function(){
		document.onmousemove = null;
		document.onmouseup = null;
	}
}
//方块移动
draw.fillRect(0,0,100,100);
var num = 0;
setInterval(function(){
	num++;
	draw.clearRect(0,0,canvas.width,canvas.height);
	draw.fillRect(num,num,100,100);
},100)

时间: 2024-10-11 22:06:26

canvas 一基础学习的相关文章

Canvas 练习及学习笔记 (二)

2016-11-06 Canvas练习及学习笔记第二篇 首先,以下还是我学习了Canvas基础后的一些小练习,源代码大家可以访问我的Github: https://github.com/fanyear 时钟 https://fanyear.github.io/Canvas/Clock/index.html (放大镜)鼠标左键   https://fanyear.github.io/Canvas/Magnifier/index.html 缩放图像  https://fanyear.github.i

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

Objc基础学习记录5

NSMutableString类继承的NSString类. NSMutableString是动态的字符串. 1.appendingString 方式: 向字符串尾部添加一个字符串. 2.appendingFormat:可以添加多个类型的字符串. int,chat float,double等 3.stringWithString 创建字符串, 4.rangeOfString 返回str1在另一个字符串中的位置. 5.NSMakeRange(0,3) 字符串0位到3位. 6.deleteCharac

Linux新手入门书籍推荐 鸟哥的linux私房菜-基础学习篇

这本书写的不错.赞~\(≧▽≦)/~ 2017-02-24 下午,我开始在Linux下写第一个.c程序,在终端打印hello world.gcc 源代码文件之后,输出可执行文件,但是 当我输入文件名执行它的时候,却提示我 无法找到命令.于是我找百度,查资料,花了半个小时,终于找到解决方法了, 输入"./filename"即可.... 2017-02-25 我看<基础学习篇>这本书,在P158页下面的例题讲解中找到了昨天下午异常的解析.我就很是感慨,心想:要是早看这本书,半个

Java基础学习——数组初识(1)

Java基础学习--数组初识(1) 1什么是数组 Java中常见的一种数据结构就是数组,数组可以分为一维数组.二维数组和多维数组. 数组是由一组相同的变量组成的数据类型,数组中每个元素具有相同的数据类型,数组中的每个元素都可以用一个统一的数组名和下标来确定. 2 数组的使用 数组的一般使用步骤: 声明数组 分配内存给该数组 下面是一维数组为例: 数据类型  数组名 []: 数组名 = new 数据类型 [数据个数]: 2.1一维数组的声明与赋值 1.数组的声明 int  num [];    

零基础学习 Hadoop 如何下手

想学习hadoop,可是苦于自己没有任何的基础,不知道该如何下手,也不知道自己能不能学会.其实零基础学习hadoop,没有想象的那么困难.曾经我也是一位小白,刚接触到云计算,想过培训,但是培训机构的选择也让我很纠结,就自己开始去摸索学习,现在我把自己的学习思路整理一下,希望对大家有帮助. 首先整体说一下学习过程给大家借鉴: 一.了解hadoop: 这里不具体阐述概念,有兴趣的同学可以自己上网去查.我们知道hadoop,有单机安装,伪分布安装和分布安装.同时hadoop的环境是Linux,所以我们

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q