使用Canvas绘制HTML5的logo

html5 javascript canvas it

pt可以轻松实现图片的放大缩小,增强了灵活性。
代码中需要注意的是canvas中的save()和restore()方法,它们用于跟踪2D上下文的状态变化。如果你知道将来还要返回某组属性与变换的组合,可以调用save()方法,它可以把当时的所有设置保存在一个栈结构。等想要回到之前保存的设置时,可以调用restore()方法,在保存设置的栈结构中向前返回一级。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Logo </title>
<meta charset="UTF-8">
<style>
footer {display:block; border-top: 1px solid orange; margin: 10px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold;}
article {display:block; font-family: Georgia, "Times New Roman", Times, serif; margin: 5px;}
</style>
<script language="Javascript">
var ctx;
var factorvalue = 1;
//will default to sans-serif
function init() {
    ctx = document.getElementByIdx_x('canvas').getContext('2d');
    ctx.font = fontfamily;
    ctx.save();
    dologo();
}
function dologo() {
var offsety = 80 ;
ctx.restore();
ctx.save();
ctx.clearRect(0,0,600,400);
ctx.scale(factorvalue,factorvalue);
    ctx.translate(0,offsety);

// 5 sided orange background

ctx.beginPath();
ctx.moveTo(39, 250);
ctx.lineTo(17, 0);
ctx.lineTo(262, 0);
ctx.lineTo(239, 250);
ctx.lineTo(139, 278);
ctx.closePath();
ctx.fill();

// right hand, lighter orange part of the background
//ctx.fillStyle = "#F16529";
ctx.beginPath();
ctx.moveTo(139, 257);
ctx.lineTo(220, 234);
ctx.lineTo(239, 20);
ctx.lineTo(139, 20);
ctx.closePath();
ctx.fill();

// light gray, left hand side part of the five
ctx.beginPath();
ctx.moveTo(139, 113);
ctx.lineTo(98, 113);
ctx.lineTo(96, 82);
ctx.lineTo(139, 82);
ctx.lineTo(139, 51);
ctx.lineTo(62, 51);
ctx.lineTo(70, 144);
ctx.lineTo(139, 144);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.moveTo(139, 193);
ctx.lineTo(105, 184);
ctx.lineTo(103, 159);
ctx.lineTo(72, 159);
ctx.lineTo(76, 207);
ctx.lineTo(139, 225);
ctx.closePath();
ctx.fill();

// white, right hand side of the 5
ctx.beginPath();
ctx.moveTo(139, 113);
ctx.lineTo(139, 144);
ctx.lineTo(177, 144);
ctx.lineTo(173, 184);
ctx.lineTo(139, 193);
ctx.lineTo(139, 225);
ctx.lineTo(202, 207);
ctx.lineTo(210, 113);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.moveTo(139, 51);
ctx.lineTo(139, 82);
ctx.lineTo(213, 82);
ctx.lineTo(216, 51);
ctx.closePath();
ctx.fill();


}

function changescale(val) {
factorvalue = val / 100;
dologo();
}
</script>
</head>
<body onLoad="init();">
Your browser does not support the canvas element .
</canvas>
<article>
Scale percentage:  <input id="slide" type="range" min="0" max="100" value="100" onChange="changescale(this.value)" step="10"/>
Note: slider treated as text field in some browsers.
</article>
<article>Built on <a href="http://people.opera.com/danield/html5/html5logo/">work by Daniel Davis, et al</a>, but don't blame them for the fonts. Check out the use of <em>font-family</em> in the style element and the <em>fontfamily</em> variable in the script element for safe ways to do fonts. I did the scaling. Note also use of semantic elements.</article>
<footer>HTML5 Logo by <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>.
</footer>
</body>
</html>


相关推荐

  • HTML5之Canvas绘图——使用Canvas绘制图形的基本教程 HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。1、使用Canva
  • Altium Designer绘制PCB时添加任意LOGO 最近开始学习使用AltiumDesigner2013绘制PCB,突然想在板子上放置一个LOGO图。在AltiumDesigner10以前的版本中,过程很简单(因为软件自带“PCBLogoCreator”)。可在用AltiumDesigner
  • ios/iphone开发图形绘制,类360扫描效果 因为IOS开发采用的MVC编程模式,所以无法在UIViewController绘制,必须在uiview中绘制。CGContextSetLineWidth设置线的宽度。CGContextStrokeRect绘制长方形。CGContextSet
  • HTML5网页设计:创建基本对象--绘制滚动星空 HTML5网页设计:创建基本对象--绘制滚动星空1.滚动星空类varStarfield=function(speed,opacity,numStars,clear){--------Setuptheoffscreencanvas---创建离
  • 在Word中绘制地理图形的技巧 网站首页更多文章精彩图册加为好友问题咨询一、Word中的绘图工具介绍  点击Word工具栏中的“绘图”按钮,屏幕下方会出现绘图工具栏:  二、绘图技能要点  1.快捷技巧  (1)按键,将本文件中“绘图网格”设置为横竖均0.01,便于把图形
  • illustrator绘制逼真可口的葡萄 ​我们将正要创建的最终作品在这个教程中我们将学会怎样用基本的AdobeIllustrator工具绘制一串葡萄,你将学会使用形状和技巧怎样呈现光源和怎样塑造一个复杂的对像。让我们开始吧。步骤1创建一个新的文档,我们将通过绘制一个葡
  • 室内空气检测气相色谱仪之绘制曲线和校正因子 室内空气检测气相色谱仪在作样品测定的同时,绘制标准曲线或测定校正因子。1、标准曲线的绘制取5支采样管,各管取下一端玻璃棉,直接向吸附剂表面滴加一滴约(50μl)20mol/l盐酸溶液。然后,用微量注射器分别准确加入甲醛标准溶液(1.00ml
  • 几何画板如何动态绘制y=Asinx的图像 在有关三角函数的传统教学中多以教师手工绘图,但手工绘图没有动态感,学生们无法理解。现在应用几何画板动态、直观的显示正弦函数Y=sinx的图像是怎么得来以及它的变化情况,这样学生通过动态变化的图象可以自主的接受和理解。下面就学习用几何画板动态
  • 盐城上元室内设计培训,一些基本图形的绘制方法和技巧 1.绘制正方形、圆:选择矩形/椭圆工具,按住ctrl键,拖动左键绘制,绘制完毕,注意先松开ctrl,再放开左键2.以起点绘制正方形圆:选择矩形/椭圆工具,同时按住ctrl和shift键,拖动左键绘制,绘制完毕,注意先松开ctrl和shift
  • coreldraw关于绘制基本图形的技巧 coreldraw关于绘制基本图形的技巧:1.绘制正方形,圆:  选择矩形/椭圆工具,按住ctrl键,拖动左键绘制,绘制完毕,注意先松开ctrl,再放开左键2.以起点绘制正方形圆:  选择矩形/椭圆工具,同时按住ctrl和shift键,拖动
  • 转-密宗坛城绘制 密宗坛城绘制集密本尊坛城的绘制又分外绘法和内绘法。(一)外绘法绘制坛城时,每个大度量单位的长度为二十四个大门(即九十六个小门。原作注)的宽度;每个小度量单位的长度为十六个大门(六十六个小门。原作注)的宽度。两条中线,两条对角线,加上四条基线
  • 几何画板教程:绘制三棱柱 在几何画板绘制几何图形的过程中,往往有很多种画法,但绘制棱柱的方法比较容易掌握。下面我们就以三棱柱为例,讲解一下几何画板绘制三棱柱的方法。1.新建一个几何画板文件。绘制出一个三角形ABC,并在三角形外任意绘制一条垂直的线段DE。在几何画板中

你的评论

就没有什么想说的吗?

©2017传客网    琼ICP备15003173号-2    

本站部分文章来源于互联网,版权归属于原作者。
本站所有转载文章言论不代表本站观点,如是侵犯了原作者的权利请发邮件联系站长(weishubao@126.com),我们收到后立即删除。
站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

X