canvas一周一练 -- canvas绘制立体文字(7)

运行效果:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="drawing" width="800" height="600">A drawing of someing!</canvas>
    <script type="text/javascript">
        var drawing = document.getElementById(‘drawing‘);
        if(drawing.getContext) {
            //绘制立体文字
            var context = drawing.getContext(‘2d‘);
            context.fillStyle = ‘Purple‘;
            context.textAlign = ‘center‘;
            context.textBaseline = ‘middle‘;
            context.font = ‘bold 100px Arial‘;
            context.fillText(‘莫‘, 290, 90);
            context.globalAlpha = 0.7;

            context.font = ‘bold 80px Arial‘;
            context.fillText(‘欺‘, 380, 90);
            context.globalAlpha = 0.6;

            context.font = ‘bold 70px Arial‘;
            context.fillText(‘欺‘, 205, 90);
            context.globalAlpha = 0.6;

            context.font = ‘bold 60px Arial‘;
            context.fillText(‘少‘, 450, 90);
            context.globalAlpha = 0.5;

            context.font = ‘bold 60px Arial‘;
            context.fillText(‘少‘, 140, 90);
            context.globalAlpha = 0.5;

            context.font = ‘bold 40px Arial‘;
            context.fillText(‘年‘, 500, 90);
            context.globalAlpha = 0.4;

            context.font = ‘bold 40px Arial‘;
            context.fillText(‘年‘, 95, 90);
            context.globalAlpha = 0.4;

            context.font = ‘bold 20px Arial‘;
            context.fillText(‘穷‘, 530, 90);
            context.globalAlpha = 0.3;

            context.font = ‘bold 20px Arial‘;
            context.fillText(‘穷‘, 65, 90);
            context.globalAlpha = 0.3;
        }

    </script>
</body>
</html>
时间: 2024-10-08 01:03:30

canvas一周一练 -- canvas绘制立体文字(7)的相关文章

canvas一周一练 -- canvas绘制马尾图案 (5)

运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id="drawing" width="1000" height="600">A drawing of someing!</canvas> <script type="text/javascript"> var dr

Android自定义View【实战教程】5??---Canvas详解及代码绘制安卓机器人

友情链接: Canvas API Android自定义View[实战教程]3??--Paint类.Path类以及PathEffect类详解 神马是Canvas 基本概念 Canvas:可以理解为是一个为我们提供了各种工具的画布,我们可以在上面尽情的绘制(旋转,平移,缩放等等).可以理解为系统分配给我们一个一个内存空间,然后提供了一些对这个内存空间操作的方法(API), 实际存储是在下面的bitmap. 两种画布 这里canvas可以绘制两种类型的画图,分别是view和surfaceView. V

HTML5 &lt;canvas&gt; 元素用于图形的绘制,通过脚本(通常是javascript)完成

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形 可以通过多种方法使用canvas绘制路径\盒\圆以及添加图像 创建一个画布(Canvas) 一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制. 注意: 默认情况下 <canvas> 元素没有边框和内容. <canvas>简单实例如下: <canvas id="myCanvas" width="200" height="100&

html5 canvas绘图-刻度仪表盘的绘制

---恢复内容开始--- 圆弧,尤其是圆,通常被用做描绘一些实物.下图所示的应用程序用5个圆形实现了一个仪表盘.仪表盘的刻度代表了圆周上的角度值.用户可以通过它来交互式地旋转多边形物体. 该应用程序使用了本章到目前为止所讲的很多技术.为了绘制这个仪表盘,该应用程序画了许多圆形与线段,使用了各种颜色及透明度,对圆形路径进行了描边与填充.同时为了使盘面上的刻度看起来有深度感,它还运用了阴影效果.该程序还运用了剪纸效果.使得仪表盘外围的那一圈看起来有半透明的效果. 仪表盘的绘制 html代码: 1 <

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制四分之一圆(3)

前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body&g

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制线条和圆(1)

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: 1 <canvas id="myCanvas" width="200" height="100"></ca

【canvas系列】用canvas实现一个colorpicker

每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ********************************************************************** 效果图和demo 突然翻到了之前用js和dom写的一个colorpicker,比较挫,扔张图就好(old) 这个真的很挫,性能很差,因为每一个可选的颜色值都是一个

SharpGL学习笔记(十七) 立体文字和平面文字

在写有关文字的主题前,笔者翻阅了几本书上的相关章节,研究了几天无果. 徐明亮<OpenGL游戏编程>书中介绍的是“位图字体”,也就是把字体栅格化,然后画出来.照着书上的VC代码翻译为C#的,突然卡在一个windows API,  wglUseFontBitmpas()上面了,这个函数要传入一个DC,惨了,不知道怎么搞了. 另一本书上文字相关的章节介绍的类似于画贴图方式,载入文字纹理图片,由于它的代码使用了一个游戏框架,照成我需要研究整个框架是怎么运作的,试了一下还不太容易理解,就这样两天工夫就

[WebGL入门]二十,绘制立体模型(圆环体)

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 立体的模型 这次稍微喘口气,开始绘制立体模型.这里说的[喘口气]是指本次的文章中没有出现任何新的技术知识点.只是利用到现在为止所介绍过的内容,来绘制一个立体的圆环体.到现在为止,只绘制了三角形和四边形,当然,在三维空间中绘制简单的多边形也没什么不对,但是缺点儿说服力.