<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入门的更多相关文章

  1. Canvas入门（2）:图形渐变和图像形变换

    来源:http://www.ido321.com/986.html 一.图形渐变(均在最新版Google中测试) 1.绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = ...

  2. Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形

    来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...

  3. HTML5 canvas入门

    HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...

  4. canvas入门之时钟的实现

    canvas 入门之作: 三步实现一个时钟: 直接上效果:   step 1  : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('ca ...

  5. Canvas 入门案例

    五.  Canvas 入门案例 1.  canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...

  6. Canvas入门笔记-实现极简画笔

    今天学习了Html5 Canvas入门,已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8 在学习过后 ...

  7. canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  8. canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  9. canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

    [上篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  10. canvas入门（画圆）

    1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas>   接着需 ...

随机推荐

  1. SQL Server -SET NOCOUNT

    SET NOCOUNT 使返回的结果中不包含有关受 Transact-SQL 语句影响的行数的信息. 语法 SET NOCOUNT { ON | OFF } 注释 当 SET NOCOUNT 为 ON ...

  2. Cisco cmd命令（三）动态路由协议

    路由选择协议:1.矢量距离协议 2.链路状态协议 RIP路由选择协议:1.使用矢量距离协议 2.RIPv1只能使用有类路由 3.RIPv2可以使用无类路由 路由更新定时器:用于将路由器本身完整的路由选 ...

  3. UISwitch 监听响应

    UISwitch *swh = [[UISwitch alloc]initWithFrame:CGRectMake(100,100, 50, 30)];        swh.on = YES;    ...

  4. 类似QQ侧滑菜单功能实现

    之前的那文章简单实现了菜单侧拉功能,但是做不到像QQ那样导航条和tabBar一起移动...之后在网上找资料,有了思路,就自个写了个demo试试水. 先创建QHLMainController控制器,并把 ...

  5. C++服务器设计（四）：超时管理机制设计

    前四章介绍了系统层的设计,从这一章开始进入服务层的设计. 连接断开 在常见的服务器场景中,客户端断开连接的方式为被动关闭.即作为客户端请求完服务器的服务后,选择主动关闭同服务器的连接.在服务器的角度看 ...

  6. 1.想写一些关于c++的东西了，就作为个开篇吧

    又再一次重拾c++,想写一些东西,给自己看看,不想再看一些隐晦翻译的外国书籍了,就从一本好读的书开始写一写. 就这本吧, <我的第一本C++书>> 来写一写自己的东西.

  7. 【solr基础教程之九】客户端

    一.Java Script 1.由于Solr本身可以返回Json格式的结果,而JavaScript对于处理Json数据具有天然的优势,因此使用JavaScript实现Solr客户端是一个很好的选择. ...

  8. js 原型

    1: function Person (name,age) { 2: this.name = name; 3: this.age = age; 4: } 5:   6: Person.prototyp ...

  9. phpexcel导入excel文件报the filename xxx is not recognised as an OLE file错误。

    工作中频繁会用phpexcel类导入excel文件的数据到数据库,目前常用的excel文件格式有:xls.csv.xlsx. 刚开始,针对xls文件,使用如下程序,能正常运行: $objReader ...

  10. SQL查询 addScalar()或addEntity()

    Hibernate除了支持HQL查询外,还支持原生SQL查询.   对原生SQL查询执行的控制是通过SQLQuery接口进行的,通过执行Session.createSQLQuery()获取这个接口.该 ...