canvas入门
<html>
<head>
<script>
window.onload=function(){
var canvas=document.getElementById('cs'); //获取到canvas元素
var gt=canvas.getContext('2d'); //获取2d上下文对象
//[1] gt.fillRect(10,10,100,100) //在横坐标和纵坐标为10的地方创建一个长宽为100的方块
//[2]gt.strokeRect(10,10,100,100) //在横坐标和纵坐标为10的地方创建一个长宽为100的边框
//[3]gt.fillStyle='blue';
// gt.fillRect(10,10,100,100); //方块的颜色就变成了蓝色
//[4]gt.strokeStyle='green';
// gt.strokeRect(); //边框颜色就变成绿色
//[5]gt.lineWidth=20;
// gt.strokeRect(); //将边框宽度设置为20
//[6]gt.lineJoin(round)
// gt.strokeRect(); //设置成圆角的边框
//[7]gt.beginPath() //当在一个路径中创建两条线，第二条会覆盖掉第一条。因为在同一个路径；创建两个路径就不会覆盖
//[8]gt.closePath() //当两条或者多条线条，一边想接的时候，会自动生成一条之间将其闭合
//[9][10][11] gt.moveTo(50,50) //在坐标(50,50)开始绘制一个点
// gt.lineTo(150,150) //在坐标(150,150)绘制一个连接moveTo的点
// gt.stroke(); //绘制出路径
}
</script>
</head>
<body style="background:block"> //设置成和canvas不同颜色比较好区别
<canvas id="cs" width="400" height="400" style="background:white" ></canvas> //将canvas的画布设置成长为400和宽为400的白色背景
</body>
</html>
//[1]fillRect(X,Y,W,H) 创建一个默认黑色的方块。 X,Y 表示坐标；W，H表示宽高
//[2]strokeRect(X,Y,W,H) 创建一个默认黑色的边框。X,Y,W,同上
//[3]fillStyle 修改填充颜色
//[4]strokeStyle 修改边框颜色
//[5]lineWidth 修改边线的颜色
//[6]lineJoin(round or bevel) 修改边框样式 round 为圆角 bevel为斜切
//[7]beginPath() 开辟一条新路径
//[8]closePath() 闭合
//[9]moveTo(x,y) 将绘图游标移动到(x,y),就是在(x,y)这里开始绘图（一个点）
//[10]lineTo (x,y) 从上一个点绘画一条直线到(x,y)
//[11]stroke() stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
//[12]fill() 由点绘制成图形的图形进行填充颜色
//[13]Rect(X,Y,W,H) 在指定坐标创建一个不填充颜色的方块（[1]其实就是[12]和[13]的总和）
//[14]clearRect(x,y,w,h) //清除掉画布上指定区域的东西
canvas入门的更多相关文章
- Canvas入门（2）:图形渐变和图像形变换
来源:http://www.ido321.com/986.html 一.图形渐变(均在最新版Google中测试) 1.绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = ...
- Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形
来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...
- HTML5 canvas入门
HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...
- canvas入门之时钟的实现
canvas 入门之作: 三步实现一个时钟: 直接上效果: step 1 : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('ca ...
- Canvas 入门案例
五. Canvas 入门案例 1. canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...
- Canvas入门笔记-实现极简画笔
今天学习了Html5 Canvas入门,已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8 在学习过后 ...
- canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线
[上篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas入门（画圆）
1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas> 接着需 ...
随机推荐
- 软件测试作业三 尝试使用JUnit
写一个判断三角形种类的代码,对其进行测试. 判断三角形代码: package 测试1; public class sjx { public String f(int a,int b,int c) { ...
- 一次$.getJSON不执行的记录
别人的代码,拿过来调,发现修改功能都不能用,修改时通过ajax发json获取数据的,看chrome开发者工具发现有发送数据,也有返回值: 发起请求并获取数据,发现回调函数不执行! $.getJSON( ...
- KMP与扩展KMP
原文转自:http://www.cppblog.com/MatoNo1/archive/2011/04/17/144390.aspx KMP:给出两个字符串A(称为模板串)和B(称为子串),长度分别为 ...
- PHP __autoload函数知识点
__autoload函数主要是用来包含不存在的类文件,当初始化的类不存在的时候 存在一个文件名为footer.php的文件,里面有个footer类 class footer{ public funct ...
- jquery之stop()的用法
// 为了看效果,随意写的动画 $('#animater').animate({ 'right':-800 }, 3000).animate({'font-size':'16px'},'normal' ...
- WAMPSERVER2.2 无法启动的解决！
转: PHP版本:5.3.10 XDEBG插件:php_xdebug-2.1.2-5.3-vc9.dll WAMPServer2.2用的是VC9编译的,并且需要VC9运行库支持. 此问题解决方法: 下 ...
- py函数递归
1.从前有座山,山中有座庙,庙里有一个老和尚在讲故事... 2.递归:程序调用自身. 3.形式:在函数定义有直接或间接调用自身. 例如:阶乘: n!= 1 x 2 x 3 x ... x n; 从后身 ...
- 快速制作规则及获取规则提取器API
1. 引言 前面文章的测试案例都用到了集搜客Gooseeker提供的规则提取器,在网页抓取工作中,调试正则表达式或者XPath都是特别繁琐的,耗时耗力,工作枯燥,如果有一个工具可以快速生成规则,而且可 ...
- Pie（hdu 1969 二分查找）
Pie Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...
- 镜像树（dfs）
1214: J.镜像树 时间限制: 1 Sec 内存限制: 64 MB提交: 18 解决: 7 标签提交统计讨论版 题目描述 一棵二叉树,若其与自己的镜像完全相同,就称其为镜像树(即这棵二叉树关于 ...