[ html drawImage 图片预加载 ] canvas绘制图片 drawImage 属性实例演示之三--使用New Image()进行图片预加载

 1 <!DOCTYPE html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4 <title>Insert you title</title>
 5 <meta name=‘description‘ content=‘this is my page‘>
 6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
 7 <meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘>
 8 <link rel=‘stylesheet‘ type=‘text/css‘ href=‘./css/index.css‘ />
 9 <script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>
10 <style type=‘text/css‘>
11 html,body {
12     margin: 0; padding: 0;
13 }
14
15 html {
16     height: 100%;
17 }
18
19 body {
20     background: #000;
21 }
22
23 #can {
24     background: #FFF; display: block; margin: 25px auto; border-radius: 2px;
25 }
26 </style>
27 <script type=‘text/javascript‘>
28     var oCan = null , oImg = null;
29     $( function(){
30         oCan = $( ‘#can‘ ).get( 0 ).getContext( ‘2d‘ );
31         var oImg = new Image();
32         oImg.src = ‘./images/demoImg.jpg‘;
33         oImg.onload = function(){
34             oCan.drawImage( oImg , 0 , 0 , oImg.width / 2 , oImg.height / 2 );
35         };
36     } );
37 </script>
38 </head>
39 <body>
40     <canvas id=‘can‘ width=‘500‘ height=‘450‘>检测到您的浏览器版本过低请升级您的浏览器以获取更好的使用体验...</canvas>
41 </body>
42 </html>
时间: 2024-12-13 16:47:52

[ html drawImage 图片预加载 ] canvas绘制图片 drawImage 属性实例演示之三--使用New Image()进行图片预加载的相关文章

[ html canvas save restore ] canvas绘图 save restore 属性实例演示

解析: 我们可以在做平移变换之前将当前canvas的状态进行保存,其实Canvas为 我们提供了图层(Layer)的支持,而这些Layer(图层)是按"栈结构"来进行管理的 当我们调用save()方法,会保存当前Canvas的状态然后作为一个Layer(图层),添加到Canvas栈中, 另外,这个Layer(图层)不是一个具体的类,就是一个概念性的东西而已! 而当我们调用restore()方法的时候,会恢复之前Canvas的状态,而此时Canvas的图层栈 会弹出栈顶的那个Layer,

[ html drawImage 绘制图片 ] canvas绘制图片 drawImage 属性实例演示之二

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

[ html drawImage 绘制图片 ] canvas绘制图片 drawImage 属性实例演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="

[ html canvas 绘制曲线三种方法 ] canvas绘图 绘制曲线三种方法属性实例演示

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

canvas绘制二次贝塞尔曲线----演示二次贝塞尔四个参数的作用

canvas中绘制二次贝塞尔曲线的方法为ctx.quadraticCurveTo(x1,y1,x2,y2); 四个参数分别为两个控制点的坐标.开始点即当前canvas中目前的点,如果想从指定的点开始,需要使用ctx.moveTo(x,y)方法 演示效果如下图 上代码: html <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title

[ html canvas 绘制文本 ] canvas绘图实现绘制文本 strokeText fillText方法及textAlign textBaseline font 属性实例演示

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

[ html 绘图 时钟 ] canvas绘图时钟实例演示之三

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

[ html canvas 旋转 缩放 平移 ] canvas绘图实现旋转复制实例演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="

[ html 绘图 translate ] canvas绘图属性translate 设置画布中心点属性实例演示

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt