HTML5页面绘图
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页面绘图的更多相关文章
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
- HTML5 页面制作工具
https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站 81 235 初页 制 ...
- 微信HTML5页面设计建议
一个HTML5页面从提出到完成上线的流程:> 1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给 ...
- html5页面与android页面之间通过url传递参数
html5页面与android页面之间可以通过url传递参数,android将参数放在htm5的url ?后面,js获取url ?号后面的参数. 方法一: <scrīpt> /* 用途 ...
- 转：HTML5页面如何在手机端浏览器调用相机、相册功能
HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...
- HTML5页面开发的基础性模板
分享一个HTML5页面开发的基础性模板,包含了两个版本: 开发版本 注释版本 开发版本 <!DOCTYPE html> <html> <head> <meta ...
- 写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议
============================== 2018更新 iphone X 的设计内容 ============================== 我保证你一分钟就 ...
- 在PC机上，如何用Chrome浏览器模拟查看和调试手机的HTML5页面？
如题,如何用PC机上的Chrome浏览器模拟查看和调试手机HTML5页面? 参考操作步骤如下: 第一步.用Chrome打开要调试的页面: 第二步.按F12,打开“开发者工具”,点击其右上角的“Dock ...
- 用android studio创建第一个安卓程序加载html5 页面
前言 软件版本:android studio v1.0正式版,由于v0.x以来软件变化一直比较大,很多问题搜索的解决方案也都是v0.x版本时代的,故首先声明一下版本. 动机:由于工作中需要对移动端软件 ...
随机推荐
- npm 使用记录
在 Mint 下安装 pencil,折腾半天,发现它对 firefox 的支持,只到 46.0 .本来打算研究下怎么用 xulrunner 来跑 pencil 这个 web 应用,查看项目资源的时候, ...
- Linux/Mac/Shell常用命令
常用命令 · ls 查看当前目录下的文件 · cd 进入某目录 · cd - 跳转回前一目录 · cd ~ 进入当前用户个人目录 · pwd 输出当前所在路径 · mkdir 新建文件夹 · touc ...
- 不把C作为第一门语言是个好主意么
---------------------------------------------------------------------------------- 不把C作为第一门语言是个好主意 ...
- JavaScript写在Html页面的<head></head>中
JavaScript写在Html页面的<head></head>中 ----------------- <html> <head> <style ...
- linux集群时钟问题
一.ntpd与ntpdate的区别: 摘自:ntpd与ntpdate的区别 - 百事乐 - 博客园 http://www.cnblogs.com/liuyou/archive/2012/07/29/ ...
- FineUI常见问题
常见问题解答(必读) http://fineui.com/bbs/forum.php?mod=viewthread&tid=655
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- [Centos] Centos 7笔记
命令行与图形界面 在X-Window图形操作界面中按“Alt+Ctrl+功能键Fnn=1~6”就可以进入Console字符操作界面.这就意味着你可以同时拥有X-Window加上6个Console字 ...
- ZOJ 3703 Happy Programming Contest
偏方记录背包里的物品.....每个背包的价值+0.01 Happy Programming Contest Time Limit: 2 Seconds Memory Limit: 65536 ...
- PropertiesFactoryBean PropertyPlaceholderConfigurer 区别
正如 stackoverflow上说的,PropertiesFactoryBean 是PropertiesLoaderSupport 直接的实现类, 专门用来管理properties文件的工厂bean ...