canvas 标签：
获取画笔：

对象.getContext("2d")
制定画笔Syte：

context.fillStyle = "red";
context.fill();

context.strokeStyle = "blue";
context.stroke();
设置线条的宽度：

lineWidth=2 后面以像素单位

绘制有阴影的图形：

context.shadowBlur = 15;
context.shadowColor = "black";
绘制有渐变的图形：

context.createLinearGradient(10,10,110,10);起始位置和结束位置
addColorStop(0,"white");前面的图的百分比0-1
context.fillStyle = linearGradient;
绘制矩形：

context.fillRect(48,65,120,200);

擦除：

context.clearRect(0,0,200,100);

绘制圆形：

context.arc(0,0,0,0,0);
起始的X,Y，半径，起始角，弧度，逆时针：true 或者顺时针：False

绘制线条：

context.moveTo();
context.lineTo();

重置路径，开始新路径：

beginPath()

重置所有设置：

restore()
初始化起点位置：

translate() 坐标X和Y

例文：

<body>
<div>
<canvas id="cs" width="1300" height="600">
</canvas>
</div>
</body>

<script>

window.onload=function(){
android()
};
var cs = document.getElementById("cs");
//获取画笔
var context = cs.getContext("2d");

function android(){
context.lineWidth=25;
context.translate(400,150);
//绘制机器人身体
context.beginPath();
context.fillStyle = "#59cc41";
context.strokeStyle = "#59cc41";
context.lineJoin="round";
context.moveTo(0,0);
context.lineTo(80,0);
context.lineTo(80,90);
context.lineTo(0,90);
context.closePath();
context.fill();
context.stroke();
//绘制机器人的双手
context.beginPath();
context.lineWidth=2;

context.moveTo(-45,0);
context.lineTo(-45,60);
context.quadraticCurveTo(-35,70,-25,60);
context.lineTo(-25,0);
context.quadraticCurveTo(-35,-15,-45,0);

context.moveTo(105,0);
context.lineTo(105,60);
context.quadraticCurveTo(115,70,125,60);
context.lineTo(125,0);
context.quadraticCurveTo(115,-15,105,0);
context.fill();
//绘制机器人的双脚

context.moveTo(10,90);
context.lineTo(10,140);
context.quadraticCurveTo(20,150,30,140);
context.lineTo(30,90);

context.moveTo(50,90);
context.lineTo(50,140);
context.quadraticCurveTo(60,150,70,140);
context.lineTo(70,90);
context.fill();
//绘制机器人的头部
context.beginPath();
context.arc(40,-20,50,0,Math.PI,true);
context.fill();
//绘制机器人的眼睛
context.beginPath();
context.fillStyle = "black";
context.arc(20,-40,5,0,2*Math.PI,true);
context.fill();
context.beginPath();
context.fillStyle = "black";
context.arc(60,-40,5,0,2*Math.PI,true);
context.fill();
//绘制机器人的天线
context.beginPath();
context.lineWidth=5;
context.moveTo(10,-90);
context.lineTo(20,-60);
context.moveTo(70,-90);
context.lineTo(60,-60);
context.stroke();
}

</script>

HTML5页面绘图的更多相关文章

  1. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  2. HTML5 页面制作工具

    https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站     81 235 初页 制 ...

  3. 微信HTML5页面设计建议

    一个HTML5页面从提出到完成上线的流程:>   1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给 ...

  4. html5页面与android页面之间通过url传递参数

    html5页面与android页面之间可以通过url传递参数,android将参数放在htm5的url  ?后面,js获取url  ?号后面的参数. 方法一: <scrīpt> /* 用途 ...

  5. 转：HTML5页面如何在手机端浏览器调用相机、相册功能

    HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...

  6. HTML5页面开发的基础性模板

    分享一个HTML5页面开发的基础性模板,包含了两个版本: 开发版本 注释版本 开发版本 <!DOCTYPE html> <html> <head> <meta ...

  7. 写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议

    ==============================   2018更新 iphone X 的设计内容   ==============================     我保证你一分钟就 ...

  8. 在PC机上，如何用Chrome浏览器模拟查看和调试手机的HTML5页面？

    如题,如何用PC机上的Chrome浏览器模拟查看和调试手机HTML5页面? 参考操作步骤如下: 第一步.用Chrome打开要调试的页面: 第二步.按F12,打开“开发者工具”,点击其右上角的“Dock ...

  9. 用android studio创建第一个安卓程序加载html5 页面

    前言 软件版本:android studio v1.0正式版,由于v0.x以来软件变化一直比较大,很多问题搜索的解决方案也都是v0.x版本时代的,故首先声明一下版本. 动机:由于工作中需要对移动端软件 ...

随机推荐

  1. UOJ#67. 新年的毒瘤

    传送门 练习一下Tarjan的模板. 求一下割点,然后加个约束条件判一下特殊点,剩下的就是所求点. //UOJ 67 //by Cydiater //2016.10.27 #include <i ...

  2. BZOJ4416: [Shoi2013]阶乘字符串

    可以大胆猜想n>21时无解,至于依据,不开O2,1s,n<=21刚好能卡过去= = 并不会证= = #include<cstdio> void up(int& a,in ...

  3. python学习笔记-（十二）scoket编程基础

    socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...

  4. Python Day1

    一.安装python windows 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装到C盘下 3.配置环境变量 右键计算机属性---高级系统设置 ...

  5. 10月25日下午PHP静态、抽象、接口

    多态(运行多态)概念:当父类引用指向子类实例,由于子类里面对父类的方法进行了重写,父类引用在调用该方法的时候表现出的不同状态.条件:1.必须发生在继承下2.必须重写父类方法3.父类引用调用该方法 如果 ...

  6. win32 disk imager使用后u盘容量恢复

    XP下进入CMD命令窗体,Vista及7下右键以管理员方式运行DOS窗体 输入DISKPART,会显示计算机名,及DISKPART>命令行 在此状态下输入LIST DISK查看机器磁盘,正常Di ...

  7. windows7下修改hosts文件无效解决办法(转)

    通常会为了开发方便.或者屏蔽掉一些恶意网站,我们会在hosts(c:\windows\system32\drivers\etc\hosts)文件中进行相应的域名指向,例:

  8. git版本控制管理实践-4

    vcs: version control system 版本控制系统 local vcs, 集中式版本控制系统: centralized vcs; 分布式vcs: distributed vcs Lo ...

  9. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  10. lib库dll库的使用方法与关系

    一.lib库 lib库有两种:一种是静态lib(static Lib),也就是最常见的lib库,在编译时直接将代码加入程序当中.静态lib中,一个lib文件实际上是任意个obj文件的集合,obj文件是 ...