文档章节

HTML5之帆布(canvas)(五)

博为峰教研组
 博为峰教研组
发布于 2016/12/12 15:17
字数 164
阅读 3
收藏 0

绘制文本

· 设置文本的属性

· 填充文本

//画文本

function drawText(canvas,context) {

 

    var selectObj = document.getElementById("foregroundColor");

    var index = selectObj.selectedIndex;

    var fgColor = selectObj[index].value;

 

    context.fillStyle = fgColor; //设置字体颜色

    context.font = "bold 1em sans-serif"; //设置字体

    context.textAlign = "left"; //设置对齐方式

    context.fillText("I saw this tweet",20,40); //填充文本

 

    context.font = "bold 1em sans-serif";

    context.textAlign = "right";

    context.fillText("and I got was this lousy t-shirt!",canvas.width-20,canvas.height-40);

}

绘制图片

· 首先,创建一个JavaScript图片对象

· 设置这个图像对象的图片来源地址

· 调用的drawImage方法绘制图片

function drawImage(canvas,context) {

    var image = new Image();

    image.src = "twitterBird.png";

 

    //表示图片加载完成,就执行这个函数

    image.onload = function () {

        context.drawImage(image,20,120,70,70);

    }

}

效果:

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
CreateJs系列教程-1-开始出发

介绍: CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎。打造 HTML5 游戏! CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,旨在降低 HTML5 项目的开发难度和成...

乐派电影
2015/11/11
0
0
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SingleNumber136 leetCode

Given a non-empty array of integers, every element appears twice except for one. Find that single one. Note: Your algorithm should have a linear runtime complexity. Could you im......

woshixin
21分钟前
0
0
String ,  StringBuffer ,  StringBuilder的区别

String , StringBuffer , StringBuilder的区别 String 首先,String 是用来表示一个字符串常量的,它是一个不可变对象,意味着,一旦我们创建了某个字符串之后,就不能再改变它的值了,我们可...

tsmyk0715
今天
2
0
区块链100讲:UTXO 和 Account 模型对比

在当前区块链世界中,主要有两种记录保存方式,UTXO 模式(Unspent Transaction Output) 和 Account 模式。Bitcoin 采用的是 UTXO 模型,Ethereum 采用的 Account 模型,同样 CITA 也采用了 ...

HiBlock
今天
1
0
Vue中路由管理器Vue Router使用介绍(三)

一、路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 { path:'/user/:id/:name', name:'user', component:()=>import('./views/User.vue') ...

tianma3798
今天
1
0
从ibdata文件恢复mysql数据

DROP TABLE 恢复【一】 Recover InnoDB dictionary Percona Data Recovery Tool 单表恢复

IT--小哥
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部