笔记十七（绘制图片）

来源：互联网发布：csol星陨巨锤连击编程编辑：程序博客网时间：2024/05/21 00:54

绘制图片有两种方式：
1、加载图片
2、使用图片元素
文件名：img.html。

<!DOCTYPE html><html><head>    <meta charset = "utf-8">    <title>绘制图片</title><style>#canvas{background-color: #99cc33;}#jielun{display: none;}</style></head><body><canvas id="canvas" width="400" height="400"></canvas><img id="jielun" src="resource/jielun.jpg"><script type="text/javascript">    window.onload = function(){        var canvas = document.getElementById('canvas'),            context = canvas.getContext("2d"),            img1 = document.getElementById("jielun"),//使用图片元素            img = new Image();//创建对象，加载图片        img.src = "resource/jielun.jpg";        img.onload = function(){            context.drawImage(img,100,100,200,200);        }        context.drawImage(img1,0,0,100,100);    }</script></body></html>

效果图（无与伦比、为杰沉迷）：

参见《HTML5+Javascript动画基础》。

0 0