本文介绍了如何利用JavaScript和Canvas进行图片绘制，特别强调了在浏览器加载完成图片后如何进行绘制，包括不同方式的drawImage方法，用于实现台球式的多球随机碰撞运动效果。
Canvas 图片绘制
1.创建图片对象
var 变量名称 = new Image();
2.设置图片路径
变量名称.src = “路径地址”；
3.当浏览器将图片加载完成后，在进行绘制图片
变量名称.onload = function(){
绘制图片
}
ctx.drawImage(img,x,y);
图片对象 , 绘制x，绘制y
ctx.drawImage(img,x,y,w,h);
图片对象 , 绘制x，绘制y，宽，高
ctx.drawImage(img,ix,iy,iw,ih,x,y,w,h);
图片对象 ,图片x,图片y,图片宽，图片高，绘制x，绘制y，宽，高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="800" ></canvas>
<script>
var can = document.getElementById("myCanvas");
var ctx = can.getContext("2d");
var colors = ["blue","red","green","
最低0.47元/天 解锁文章
扫一扫
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
