当前位置: 传客网 > 使用Canvas绘制HTML5的logo

使用Canvas绘制HTML5的logo

2017-01-11 作者:毛豆

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。在几何画板中

  • 教你ChemDraw Std如何绘制化学键的技巧

    在化学教学研究中要经常绘制化学键,ChemDrawStd能够轻松快捷地绘制化学键,为了说明ChemDrawStd的基本绘图技巧,本教程将向大家介绍如何简单地绘制化学键。  绘图过程中,ChemBioDraw可以帮你检查对应的化学名称。如果有

  • 怎样利用描点法绘制函数y=x^3的图像

    利用描点法绘制函数图像的方法并不局限于某个函数,而是可适用于绘制任何一个函数的图像。下面以函数y=x3为例,详细介绍利用几何画板绘制点的方法绘制函数图像。几何画板5.06简体中文版最新下载地址请点击http://www.jihehuaban

  • 几何画板怎样绘制函数y=x^3的图像

    利用描点法绘制函数图像的方法并不局限于某个函数,而是可适用于绘制任何一个函数的图像。下面以函数y=x3为例,详细介绍利用几何画板绘制点的方法绘制函数图像。现在访问http://www.jihehuaban.com.cn/xiazai.htm

  • 喷绘制作对于设计者而言需要注意的事项

    喷绘制作对于设计者而言需要注意的事项  喷绘的制作实际上从技术角度来考虑的话,并没有什么技术含量的,就是直接通过蒙泰打印软件,通过一些设置,让数据与喷绘机同步运行,就达到输出的效果了,对于画面影响最大实际上还在设计师这个关卡,下面就喷绘制作

  • PPT动画教程:绘制图形

      今天我们用动画的形式介绍绘制图形的方法和技巧。  根据演示文稿的需要,经常要在其中绘制一些图形,利用其中的“绘图”工具栏,即可搞定。  1、执行“视图→工具栏→绘图”命令,展开“绘图”工具栏。  2、点击工具栏上的“自选图形”按钮,在随

  • chemdraw快速绘制化学键技巧

    在化学教学研究中要经常绘制化学键,ChemDraw能够轻松快捷地绘制化学键,为了说明ChemDraw的基本绘图技巧,本教程将向大家介绍如何简单地绘制化学键。如果电脑前的用户还免费获取chemdraw注册码请点击http://www.chem

  • 基于Delphi实现波函数图像绘制

    摘要:本文介绍了基于Delphi7软件设计实现正弦波、余弦波、方波、三角波函数图像绘制的方法,并简单介绍其设计原理、过程。关键字:Delphi7;图像绘制;过程。1引言在Delphi中,专门定义了一组用于绘制图形的对象和组件,完成一些简单的

  • 几何画板如何绘制正多边形

    在几何画板中,我们可以进行正多边形的绘制。下面我们就以几何画板绘制正五边形为例,看看正多边形的绘制方法。1.新建一个几何画板文件。选择“数据”—“新建参数”命令,在打开的对话框中,将“名称”设置为“n”,“值”设置为5。如下图所示。然后点击