canvas学习笔记（中篇） 10h搞定canvas基础系列(4)_H5之家 - 中国HTML5教程资源分享第一站

canvas教程

canvas学习笔记（中篇） 10h搞定canvas基础系列(4)

字号+ 作者：H5之家来源：H5之家 2017-10-23 14:27 我要评论( )

var c = document.getElementById("myCanvas" ); var ctx = c.getContext("2d" ); var img = new Image(); // 创建了一个Image对象 img.src = "https://timgsa.baidu.com/timg?imagequality=80size=b9999_10000sec=

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = new Image(); //创建了一个Image对象 img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507713846845&di=51e9f2958ed57789a0fa8e656a8c57c8&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D952c2aeb14178a82da3177e39e6a19f8%2Fb8014a90f603738dbe7ddc05b91bb051f819ece6.jpg"; img.onload = function(){ ctx.drawImage(img,50,50,300,190); //将图片绘制到canvas中 }

这里绘制图片也可以使用从页面获取的 Img dom对象，如: ctx.drawImage(document.getElementsByTagName("img")[0],100,100,300,190);

今天就讲到这里，下节课我们讲解：canvas变换 / 路径保存 / 综合案例

关注公众号，博客更新即可收到推送

来源：马开东云搜索（电话：15110131480 微信：makaidongzi QQ：1130122167 微信公众号：makaidong-com）
欢迎分享本文，转载请保留出处！

【原文】

　

canvas 学习笔记中篇搞定基础系列

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章

我的three.js学习记录（三）

2017-10-23 13:36
loader学习教程之相关配置篇

2017-10-23 09:00
Canvas事件处理

2017-10-23 08:13
html5 canvas动画教程：亲手做一个类似windows画图软件

2017-10-23 08:04

网友点评

精彩导读

炫丽的倒计时效果Canvas绘图与动画视频的资源

HTML5组件Canvas实现图像灰度化(步骤+实例效

自己动手做个拼图游戏

canvas 绘制圆形时钟

Canvas操作像素实现颜色的增删改

热门资讯

关注我们

关注微信公众号，了解最新精彩内容

-