HTML5之帆布(canvas)(五)
HTML5之帆布(canvas)(五)
博为峰教研组 发表于10个月前
HTML5之帆布(canvas)(五)
  • 发表于 10个月前
  • 阅读 1
  • 收藏 0
  • 点赞 0
  • 评论 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);

    }

}

效果:

共有 人打赏支持
粉丝 40
博文 1224
码字总数 479077
×
博为峰教研组
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: