Canvas变形金刚

这里是html代码

<canvas width=500 height=500 id="cas"></canvas>

这里是css代码

*{margin: 0;padding: 0;
}
canvas{/*border: 1px solid;*/position: absolute;margin-left: 50%;left: -250px;
}

这里是js代码

onload = function () {var cas = document.querySelector("#cas");var ctx = cas.getContext("2d");//左上角的眼睛ctx.moveTo(12,55);ctx.lineTo(78,55);ctx.lineTo(96,107);ctx.lineTo(185,164);ctx.lineTo(205,259);ctx.lineTo(135,259);ctx.lineTo(34,194);ctx.closePath();//最后一次和第一次拼接//左上角的眼睛里面的空白ctx.moveTo(57,102);ctx.lineTo(60,125);ctx.lineTo(171,196);ctx.lineTo(171,176);ctx.closePath();//左上角的眼睛里面的空白2ctx.moveTo(64,149);ctx.lineTo(70,173);ctx.lineTo(179,244);ctx.lineTo(179,225);ctx.closePath();//左边的脸ctx.moveTo(48,235);ctx.lineTo(93,264);ctx.lineTo(92,293);ctx.lineTo(136,320);ctx.lineTo(136,454);ctx.lineTo(136,454);ctx.lineTo(68,406);ctx.closePath();//嘴巴ctx.moveTo(207,293);ctx.lineTo(207,394);ctx.lineTo(293,395);ctx.lineTo(294,293);ctx.lineTo(340,325);ctx.lineTo(340,468);ctx.lineTo(322,482);ctx.lineTo(294,417);ctx.lineTo(206,417);ctx.lineTo(180,480);ctx.lineTo(160,468);ctx.lineTo(160,325);ctx.closePath();//下巴ctx.moveTo(224,438);ctx.lineTo(276,438);ctx.lineTo(296,482);ctx.lineTo(205,482);ctx.closePath();//鼻子ctx.moveTo(211,179);ctx.lineTo(249,203);ctx.lineTo(290,180);ctx.lineTo(270,260);ctx.lineTo(270,369);ctx.lineTo(231,369);ctx.lineTo(232,260);ctx.closePath();//右边的脸ctx.moveTo(363,320);ctx.lineTo(407,293);ctx.lineTo(408,264);ctx.lineTo(452,234);ctx.lineTo(432,406);ctx.lineTo(364,453);ctx.lineTo(364,320);ctx.closePath();//右上角的眼睛ctx.moveTo(408,56);ctx.lineTo(486,56);ctx.lineTo(465,194);ctx.lineTo(364,259);ctx.lineTo(293,259);ctx.lineTo(314,163);ctx.lineTo(402,108);ctx.closePath();//最后一次和第一次拼接//右上角的眼睛里面的空白ctx.moveTo(444,101);ctx.lineTo(329,175);ctx.lineTo(329,196);ctx.lineTo(442,124);ctx.closePath();//右上角的眼睛里面的空白2ctx.moveTo(437,148);ctx.lineTo(321,223);ctx.lineTo(321,243);ctx.lineTo(433,172);ctx.closePath();//头上的宝石ctx.moveTo(117,56);//圆形ctx.lineTo(383,56);ctx.lineTo(378,93);ctx.lineTo(251,177);ctx.lineTo(122,93);ctx.closePath();//头上的宝石空白ctx.moveTo(194,79);ctx.lineTo(250,118);ctx.lineTo(306,79);//最后一个圆ctx.lineTo(194,79);ctx.stroke();ctx.fill();}

Canvas变形金刚相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
画布Canvas的使用
canvas.drawText();//画文本 canvas.drawArc();//画弧 canvas.drawCircle();//画圆 canvas.drawBitmap(); canvas.d ...
Android 自定义View Canvas —— Bitmap
Bitmap 绘制图片常用的方法有一下几种 (1) drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint ...
Android 自定义View —— Canvas
上一篇在android 自定义view Paint 里面说了几种常见的Point 属性绘制图形的时候下面总有一个canvas ,Canvas 是是画布上面可以绘制点,线,正方形,圆,等等,需要和 ...
android Canvas 最基础知识总结
学习Canvas 要先学习view 知识,这样才好学习第一步创建一个方法让它继承 View 如下图然后快捷键ait+/ 生成构造方法, 用来初始化View ,比如自定一个一些init()方法, ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
从0到1 html5 canvas,Html5 Canvas学习之路（五）
Canvas 图像(上) Canvas 图像API可以加载图像数据,然后直接将图像应用到画布上.还可以裁切.拼贴图像数据,以显示用户需要的部分.此外,Canvas还提供了像素数据的存储功能,这样就能对 ...
SVG和canvas
1.SVG实现的圆环旋转效果参考:http://www.softwhy.com/article-6472-1.html 2.SVG中的图形可以通过 transform="matrix(0 ...
D3.js、HTML5、canvas 开发专题
https://www.smartdraw.com/genogram/ http://www.mamicode.com/info-detail-1163777.html D3折线图 https:// ...

Canvas变形金刚

Canvas变形金刚相关推荐

最新文章

热门文章