使用html5 canvas 绘制Android机器人

练习使用Html5 canvas 绘制Android机器人。

要点：当对画布进行变换的时候，需要使用 save() 方法和 restore() 方法，它们应该成对使用，且 restore() 方法不能比 save() 方法多。我们只需要每次在画布变换前使用 save() 方法保存其初始状态，之后使用 restore() 方法恢复到上一次保存的状态即可。

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}#canvas {border: 1px solid #000;margin: 0 auto;display: block;}#show {position: fixed;top: 10px;left: 10px;}</style></head><body><canvas width="1000" height="1024" id="canvas" onmousemove="go(event)" onmouseout="out()">您的浏览器不支持canvas，请升级你的浏览器！</canvas><div id="show"></div></body><script type="text/javascript">//获得坐标，便于查找var show=document.getElementById("show");document.getElementById("show").innerHTML='ds'function go(e){var x=e.clientX;var y=e.clientY;document.getElementById("show").innerHTML=x+" "+y;}function out(){show.innerHTML="";}//获得canvas对象var oCanvas = document.getElementById('canvas');var ctx = oCanvas.getContext('2d');//头ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.arc(500, 300, 137, Math.PI * (-18 / 180), Math.PI * (-175 / 180), 1);ctx.fill();ctx.closePath();//身子ctx.beginPath();ctx.restore();ctx.fillStyle = '#99FE00';ctx.save();ctx.rotate(-7 * Math.PI / 180);ctx.fillRect(325, 350, 268, 200);ctx.closePath();//左眼ctx.restore();ctx.beginPath();ctx.fillStyle = '#fff';ctx.arc(430, 230, 16, 0, Math.PI * 2, 1);ctx.fill();ctx.closePath();//右眼ctx.beginPath();ctx.fillStyle = '#fff';ctx.arc(535, 220, 16, 0, Math.PI * 2, 1);ctx.fill();ctx.closePath();//左腿ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.fillRect(460, 470, 48, 100);ctx.closePath();ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.moveTo(483, 562);ctx.arc(484, 562, 25, Math.PI * (15 / 180), Math.PI * (165 / 180), 0);ctx.fill();ctx.closePath();//右腿ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.fillRect(550, 450, 48, 120);ctx.closePath();ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.moveTo(573, 562);ctx.arc(574, 562, 25, Math.PI * (15 / 180), Math.PI * (165 / 180), 0);ctx.fill();ctx.closePath();//左手ctx.save();ctx.rotate(55 * Math.PI / 180);ctx.translate(145, -430);ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.moveTo(340, 355);ctx.arc(340, 355, 24, 0, Math.PI, 1);ctx.fill();ctx.closePath();ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.fillRect(316, 355, 48, 100);ctx.closePath();ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.moveTo(340, 450);ctx.arc(340, 450, 24, 0, Math.PI, 0);ctx.fill();ctx.closePath();//右手ctx.restore();ctx.save();ctx.rotate(30 * Math.PI / 180);ctx.translate(370, -545);ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.moveTo(340, 355);ctx.arc(340, 355, 24, 0, Math.PI, 1);ctx.fill();ctx.closePath();ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.fillRect(316, 355, 48, 100);ctx.closePath();ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.moveTo(340, 450);ctx.arc(340, 450, 24, 0, Math.PI, 0);ctx.fill();ctx.closePath();//左触角ctx.restore();ctx.beginPath();ctx.strokeStyle = "#99FE00";ctx.moveTo(430,190);ctx.lineTo(390,140);ctx.lineWidth = 10;ctx.stroke();ctx.closePath();ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.arc(390, 140, 5, 0, Math.PI * 2, 1);ctx.fill();ctx.closePath();//左触角ctx.beginPath();ctx.strokeStyle = "#99FE00";ctx.moveTo(530,180);ctx.lineTo(550,120);ctx.lineWidth = 10;ctx.stroke();ctx.closePath();ctx.beginPath();ctx.fillStyle = '#99FE00';ctx.arc(550, 120, 5, 0, Math.PI * 2, 1);ctx.fill();ctx.closePath();//滑板ctx.beginPath();ctx.fillStyle = '#000';ctx.fillRect(400, 584, 300, 40);ctx.closePath();ctx.beginPath();ctx.fillStyle = '#000';ctx.arc(400, 604, 20, 0, Math.PI * 2, 1);ctx.fill();ctx.closePath();ctx.beginPath();ctx.fillStyle = '#000';ctx.arc(700, 604, 20, 0, Math.PI * 2, 1);ctx.fill();ctx.closePath();//滑板轮ctx.beginPath();ctx.fillStyle = '#000';ctx.arc(450, 658, 20, 0, Math.PI * 2, 1);ctx.fill();ctx.closePath();ctx.beginPath();ctx.fillStyle = '#000';ctx.arc(640, 658, 20, 0, Math.PI * 2, 1);ctx.fill();ctx.closePath();//Android渐变文字ctx.beginPath();ctx.font = '60px Arial';var grd=ctx.createLinearGradient(400, 0, 600, 0);grd.addColorStop(0,"black");grd.addColorStop(0.3,"magenta");grd.addColorStop(0.5,"blue");grd.addColorStop(0.6,"green");grd.addColorStop(0.8,"yellow");grd.addColorStop(1,"red");ctx.fillStyle=grd;ctx.fillText('Android', 400, 750);ctx.closePath();</script></html>

下面是代码效果：

使用html5 canvas 绘制Android机器人相关推荐

html实例教程图片绘画,Html5 canvas绘制一个机器人图形的实例教程
Canvas的功能强大,今天我只运用到Canvas的绘制图形功能来完成一个简单线条型机器人的绘制,在绘图的过程中我还是得复述一下用到的几个图形的基础知识,通过这个实例,你可以基本上了解到Canvas的 ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法发布时间:2020-08-29 11:24:23 来源:亿速云阅读:96 作者:小新这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
放射性渐变色html,html5 canvas绘制放射性渐变色效果
效果图展示: canvas有些地方还是有点坑的,比如fillRect是方法不是属性,如果写成fillRect=这样是没效果的,而且还不报错.... 这里用到了createRadialGradient这 ...
HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）
HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 原文:HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 看到网上很多展示html5雪花飞动 ...

使用html5 canvas 绘制Android机器人

使用html5 canvas 绘制Android机器人相关推荐

最新文章

热门文章