`

第26章 canvas绘制文字

阅读更多

html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="26.js"></script>
<style type="text/css">
body{ margin:0; padding:0;}
</style>
</head>

<body onLoad="draw('canvas')">
<canvas id="canvas" width='800' height="300"></canvas>
</body>
</html>

 

js

// JavaScript Document
function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = 'green';
    context.fillRect(0,0,800,300);
    context.fillStyle = '#fff';
    context.strokeStyle = '#fff';
    context.font = "bold 40px '字体','字体','微软雅黑','宋体'";
    context.textBaseline = 'hanging';
    context.textAlign = 'start';
    context.strokeText('anvas绘制文字',210,40);
    context.fillText('《一站式共享网络》',160,110);
    context.fillText('阅谁问君诵,水落清香浮',130,180);
    
}

 

效果图:

 

 

 

  • 大小: 76.5 KB
  • 26.rar (707 Bytes)
  • 下载次数: 0
2
4
分享到:
评论

相关推荐

    HTML5 CANVAS游戏开发实战(PDF和源代码)

    第二部分 基础知识篇 第2章 canvas基本功能 / 20 2.1 绘制基本图形 / 20 2.1.1 画线 / 20 2.1.2 画矩形 / 22 2.1.3 画圆 / 24 2.1.4 画圆角矩形 / 26 2.1.5 擦除canvas画板 / 27 2.2 绘制复杂图形 / 28 ...

    Learn JavaFX 8

    ##### 第 26 章:理解拖放操作 拖放是一种常见的用户交互方式。本章讲解了如何在 JavaFX 应用程序中实现拖放功能。 ##### 第 27 章:理解 JavaFX 中的并发性 JavaFX 支持多线程编程。本章讨论了如何在 JavaFX 中...

    从入门到精通HTML5——PDF——网盘链接

     第3章 设计网页文本内容 41  教学录像:29分钟  3.1 标题文字的建立 42  3.1.1 标题文字标记&lt;h&gt; 42  3.1.2 标题文字的对齐方式——align 43  3.2 设置文字格式 44  3.2.1 设置文字字体——face 44  ...

    Eclipse_Swt_Jface_核心应用_部分19

    第1章 Java语言的GUI历史 2 1.1 最初的AWT 2 1.2 Swing工具包 3 1.3 Eclipse的诞生 3 1.4 Eclipse贡献SWT工具包 5 1.4.1 SWT的结构 6 1.4.2 SWT所支持的操作系统 6 1.5 Sun AWT/Swing与Eclipse SWT 7 ...

    郭克华 J2ME 视频教程学习笔记(终稿)(密码:123456).pdf

    #### 第二十二章 GameAPI1:游戏画布、图层和游戏精灵 **22.1 简介** - **GameAPI**:提供了用于游戏开发的一系列高级功能。 **22.2 GameCanvas** - **GameCanvas**:提供了游戏开发的基础框架。 **22.3 Layer...

    计步器的实现

    /**【第二步】绘制当前进度的蓝色圆弧*/ drawArcRed(canvas, rectF); /**【第三步】绘制当前进度的白色数字*/ drawTextNumber(canvas, centerX); /**【第四步】绘制"本次步数"的灰色文字*/ drawTextStepString...

    android开发实例大全_王东华

    实例082: 在Canvas中写文字 265 实例083: 移动屏幕中的图片 272 实例084:在屏幕中绘制一个三维圆柱体 276 实例085: 获取并显示图片的宽和高 285 实例086: 编写一个手机屏保程序 287 实例087: 以触摸方式移动...

    delphi 开发经验技巧宝典源码

    第1章 开发环境 1 1.1 环境设置 2 0001 如何定制工具栏 2 0002 如何定制组件面板 2 0003 如何定制代码编辑器 3 0004 保存自定义开发环境桌面 4 1.2 组件安装 4 0005 安装ActiveX组件 4 0006 安装...

    delphi 开发经验技巧宝典源码06

    第1章 开发环境 1 1.1 环境设置 2 0001 如何定制工具栏 2 0002 如何定制组件面板 2 0003 如何定制代码编辑器 3 0004 保存自定义开发环境桌面 4 1.2 组件安装 4 0005 安装ActiveX组件 4 0006 安装...

    Delphi5开发人员指南

    第二部分 高级技术 第8章 使用GDI和字体的图像编程 167 8.1 TImage:Delphi的图像显示 167 8.2 存储图像 168 8.3 使用TCanvas的属性 169 8.3.1 画笔 170 8.3.2 使用TCanvas.Pixels属性 175 8.3.3 使用刷子 175 8.3.4...

    c26

    `Canvas`是一个画布,我们可以在这个画布上绘制图形、文字、图片等。`CanvasRenderingContext2D`是用于在`Canvas`上绘图的主要接口,提供了如绘制线条、填充形状、绘制图像等多种方法。在这个游戏中,愤怒的小鸟的...

    10步之内学会HTML

    第二步:创建基本的头部 在`&lt;head&gt;`中,最重要的元素是`&lt;title&gt;`,它定义了浏览器标签页上的页面标题。例如:`我的第一个HTML页面&lt;/title&gt;`。 第三步:添加段落与标题 `&lt;body&gt;`中,可以使用`&lt;h1&gt;`到`&lt;h6&gt;`来创建...

    仿Nest时间轴安卓demo

    3. **绘图API**: Android的`Canvas`类是绘制自定义视图的核心工具,开发者会使用`drawLine()`绘制时间轴线,`drawText()`绘制时间刻度和节点文字,`drawCircle()`或`drawRect()`来绘制节点。 4. **时间处理**: 由于...

    HTML 的PPT,让你更加了解

    第二步 第三步 ``` 九、HTML与动态网页 虽然HTML主要用于创建静态网页,但通过与其他技术结合,如JavaScript和AJAX,可以实现客户端的交互。JavaScript可以改变HTML内容,响应用户事件,而AJAX允许不刷新整个...

Global site tag (gtag.js) - Google Analytics