HTML5 canvas绘制chrome浏览器 logo图标

2024-09-05 12:19:03

字体：大中小

来源：转载

供稿：网友

HTML5学习第两天写出的：HTML5 canvas绘制chrome浏览器 logo图标，不错不错，很逼真的LOGO，用了JavaScript共同实现，之前也收集过一些Canvas画Logo的例子，有兴趣的在本栏目搜索下，对学习HTML5，特别是Canvas的使用，绝对是有帮助的。

<title>HTML5 canvas绘制chrome图标</title><h1><p>使用canvas绘制chrome logo</p><script src="/ajaxjs/jquery-1.8.3.min.js"></script><canvas id="canvas" width="344" height="344" ></canvas><br /><style>body{background-color:white;}</style><script>var oCanvas={	$ele:null,	ele:null,	context:null}$(function(){	oCanvas.ele=document.getElementById('canvas');	oCanvas.context=oCanvas.ele.getContext('2d');	oCanvas.$ele=$(oCanvas.ele);	//red	oCanvas.context.fillStyle="#E6433C";	oCanvas.context.arc(172,172,172,1.1445*Math.PI,1.8555*Math.PI);	oCanvas.context.lineTo(172,96);	oCanvas.context.lineTo(100,200);	oCanvas.context.closePath();	oCanvas.context.fill();	oCanvas.context.translate(412,143)	oCanvas.context.rotate(128.8*Math.PI/180);	//yellow	oCanvas.context.beginPath();	oCanvas.context.fillStyle="#FCD20A";	oCanvas.context.arc(172,172,172,1.1445*Math.PI,1.8555*Math.PI);	oCanvas.context.lineTo(172,96);	oCanvas.context.lineTo(100,200);	oCanvas.context.closePath();	oCanvas.context.fill();	oCanvas.context.translate(412,143)	oCanvas.context.rotate(128.8*Math.PI/180);	//green	oCanvas.context.beginPath();	oCanvas.context.fillStyle="#4DB749";	oCanvas.context.arc(172,172,172,1.1445*Math.PI,1.8555*Math.PI);	oCanvas.context.lineTo(172,96);	oCanvas.context.lineTo(100,200);	oCanvas.context.closePath();	oCanvas.context.fill();	//中间圆圈	oCanvas.context.beginPath();	oCanvas.context.fillStyle="#7BAFDE";	oCanvas.context.lineWidth="12";	oCanvas.context.strokeStyle="#F7F2EF";	oCanvas.context.arc(172,172,72,0*Math.PI,2*Math.PI);	oCanvas.context.fill();	oCanvas.context.stroke();//需考虑如何智能计算从中心旋转时候translate值})</script>

上一篇：彩色圆环旋转的HTML5网页加载特效

下一篇：html5 canvas绘制线条

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注