h5的画布Canvas

最新推荐文章于 2024-09-09 15:15:58 发布
最新推荐文章于 2024-09-09 15:15:58 发布
阅读量1.2k 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tyutjavalily/article/details/54380183
版权 
  
  

   
   绘制基本的图形
  
  

  
  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8" />
  5. 	<title>canvas</title>
  6. </head>
  7. <body>
  8. <h1>画布</h1>
  9. 	<canvas id="myCanvas" style="border:1px solid #ff0" width="200" height="100" > Your Browser does not support Canvas, please upgrade</canvas>
  10. <dl>
  11. 	<dt><h1>绘制图形的步骤</h1></dt>
  12. 	<dd>
  13. 		<ol>
  14. 		    <li>第一步，创建一个带id的canvas元素</li>
  15. 		    <li>第二步，通过id获取canvas，document.getElementById(id)</li>
  16. 		    <li>第三步，创建Context对象，创造2D环境</li>
  17. 		</ol>
  18. 		<canvas id="myCanvas1" style="border:1px solid #ff0" width="200" height="100">
  19. 

  20. 		</canvas>
  21. 	</dd>
  22. </dl>
  23. <dl>
  24. 	<dt><h1>绘制直线</h1></dt>
  25. 	<dd>
  26. 		<ol>
  27. 		    <li>第一步，使用moveTo定起点</li>
  28. 		    <li>第二步，使用lineTo定终点</li>
  29. 		    <li>第三步，使用stroke花线</li>
  30. 		</ol>
  31. 		<canvas id="myCanvas2" style="border:1px solid #ff0" width="200" height="100">
  32. 			您的浏览器不支持
  33. 		</canvas>
  34. 	</dd>
  35. </dl>
  36. <dl>
  37. 	<dt><h1>绘制矩形</h1></dt>
  38. 	<dd>
  39. 		<ol>
  40. 		    <li>第一种方法，使用fill填充，用到的fillStyle和fillRect</li>
  41. 		    <li>第二种方法，使用stroke绘制轮廓，用到的strokeStyle和strokeRect</li>
  42. 		</ol>
  43. 	</dd>
  44. 	<canvas id="myCanvas3" style="border:1px solid #ff0" width="200" height="100">
  45. 		你的浏览器支持，请更新浏览器
  46. 	</canvas>
  47. </dl>
  48. <dl>
  49. 	<dt><h1>绘制圆形</h1></dt>
  50. 	<dd>
  51. 		<ol>
  52. 		    <li>用到了beginPath(),closePath(),arc(x,y,radius,startAngle,endAngle,是否按顺时针)，fill方法</li>
  53. 		    <li>fill是用来填充图形的；stroke是画轮廓</li>
  54. 		</ol>
  55. 		<canvas id="myCanvas4" style="border:1px solid #ff0">
  56. 

  57. 		</canvas>
  58. 	</dd>
  59. </dl>
  60. <dl>
  61. 	<dt><h1>绘制弧形</h1></dt>
  62. 	<dd>
  63. 		<ol>
  64. 		    <li>使用的方法就是arc(x,y,radius,startAngle,endAngle,是否按顺时针)</li>
  65. 		</ol>
  66. 	</dd>
  67. 	<canvas id="myCanvas5" style="border:1px solid #ff0">Your Browser does not support Canvas, please upgrade</canvas>
  68. </dl>
  69. <dl>
  70. 	<dt><h1>绘制三角形</h1></dt>
  71. 	<dd>
  72. 		<ol>
  73. 		    <li>fill是填充型；stroke是轮廓型;</li>
  74. 		</ol>
  75. 		<canvas id="myCanvas6" style="border:1px solid #ff0">
  76. 

  77. 		</canvas>
  78. 	</dd>
  79. </dl>
  80. <dl>
  81. 	<dt><h1>清空画布</h1></dt>
  82. 	<dd>
  83. 		<ol>
  84. 		    <li>使用clearRect(x,y,w,h)清空指定的画布</li>
  85. 		</ol>
  86. 		<canvas id="myCanvas7" style="border:1px solid #ff0">
  87. 			可以清空的画布
  88. 		</canvas>
  89. 		<button type="button" onclick="clearMap()">清空上面的画布</button>
  90. 	</dd>
  91. </dl>
  92. <script type="text/javascript">
  93. // 绘制矩形
  94. var c=document.getElementById("myCanvas1");
  95. var context=c.getContext("2d");
  96. context.fillStyle="#ff00ff";
  97. context.fillRect(50, 25, 100, 50);
  98. // 绘制直线
  99. var c1=document.getElementById("myCanvas2");
  100. var context1=c1.getContext("2d");
  101. context1.moveTo(0, 0);
  102. context1.lineTo(200,100);
  103. context1.stroke();
  104. // 绘制矩形--填充
  105. var c2=document.getElementById("myCanvas3");
  106. var context2=c2.getContext("2d");
  107. context2.fillStyle="#ff00ff";
  108. context2.fillRect(0, 0, 200, 100);
  109. //绘制矩形-轮廓
  110. context2.strokeStyle="#fff";
  111. context2.strokeRect(0,0,100,50);
  112. // 绘制圆形--填充
  113. var c3=document.getElementById("myCanvas4");
  114. var context3=c3.getContext("2d");
  115. context3.fillStyle="#ff00ff";
  116. context3.beginPath();
  117. context3.arc(100, 75, 50, 0, Math.PI*2, true);
  118. context3.closePath();
  119. context3.fill();
  120. // 绘制圆形--轮廓
  121. context3.strokeStyle="#ff0";
  122. context3.beginPath();
  123. context3.arc(100, 75, 30,0,Math.PI*2, true);
  124. context3.stroke();
  125. // 绘制弧线
  126. var c5=document.getElementById("myCanvas5");
  127. var context5=c5.getContext("2d");
  128. for (var i = 0; i<5; i++) {
  129. 	context5.strokeStyle="#ff00ff";
  130. 	context5.beginPath();
  131. 	context5.arc(0, 150, i*10, 0, Math.PI*3/2, true);
  132. 	context5.stroke();
  133. }
  134. // 绘制三角形--填充型
  135. var c6 = document.getElementById("myCanvas6");
  136. var context6=c6.getContext("2d");
  137. context6.fillStyle="#ff00ff";
  138. context6.beginPath();
  139. context6.moveTo(25, 25);
  140. context6.lineTo(150,25);
  141. context6.lineTo(25,150);
  142. context6.closePath();
  143. context6.fill();
  144. 

  145. // 绘制三角形-轮廓型
  146. context6.strokeStyle="#ff0";
  147. context6.beginPath();
  148. context6.moveTo(30, 30);
  149. context6.lineTo(120,30);
  150. context6.lineTo(30,120);
  151. context6.closePath();
  152. context6.stroke();
  153. 

  154. // 测试清空画布
  155. var c7=document.getElementById("myCanvas7");
  156. var context7=c7.getContext("2d");
  157. context7.beginPath();
  158. context7.arc(150, 150, 100, -Math.PI*1/6, -Math.PI*5/6, true);
  159. context7.stroke();
  160. // 清空画布
  161. function clearMap(){
  162. 	context7.clearRect(0,0,300,150);
  163. }
  164. </script>
  165. </body>
  166. </html>
绘制贝塞尔曲线： 
   
   
  1. <dl>
  2. 	<dt><h1>绘制二次贝塞尔曲线</h1></dt>
  3. 	<dd>
  4. 		<ol>
  5. 		    <li>quadraticCurveTo(cp1x,cp1y,x,y),cp1x,cp1y为控制点的坐标，x,y为终点坐标；</li>
  6. 		</ol>
  7. 	</dd>
  8. 	<canvas id="myCanvas8" style="border:1px solid #ff0" width="300" height="200">
  9. 

  10. 	</canvas>
  11. </dl>
  12. <dl>
  13. 	<dt><h1>绘制三次贝塞尔曲线</h1></dt>
  14. 	<dd>
  15. 		<ol>
  16. 		    <li>bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);cp1x,cp1y是第一个控制点的坐标；cp2x,cp2y是第二个坐标的控制点</li>
  17. 		</ol>
  18. 		<canvas id="myCanvas9" style="border:1px solid #ff0" width="300" height="200">
  19. 

  20. 		</canvas>
  21. 	</dd>
  22. </dl>
  23. 

  24. 

  25. // 绘制贝塞尔曲线
  26. var c8 = document.getElementById("myCanvas8");
  27. var context8=c8.getContext("2d");
  28. context8.strokeStyle="#ff00ff";
  29. context8.beginPath();
  30. context8.moveTo(0, 200);
  31. context8.quadraticCurveTo(75, 50, 300, 200);
  32. context8.stroke();
  33. context8.globalCompositeOperation="source-over";
  34. 

  35. // 绘制三次贝塞尔曲线
  36. var c9=document.getElementById("myCanvas9");
  37. var context9=c9.getContext("2d");
  38. context9.strokeStyle="#ff0";
  39. context9.beginPath();
  40. context9.moveTo(0, 200);
  41. context9.bezierCurveTo(25,50,75,50,300,200);
  42. context9.stroke();
  43. context9.globalCompositeOperation="source-over";
图形的变化---保存与恢复canvas状态 
    
    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8" />
  5. 	<title>图形的变换</title>
  6. </head>
  7. <body>
  8. 	<dl>
  9. 		<dt><h1>保存与恢复Canvas状态</h1></dt>
  10. 		<dd>
  11. 			<ol>
  12. 			    <li>save() :保存canvas的状态到堆中</li>
  13. 			    <li>restore:从堆中恢复canvas的状态</li>
  14. 			</ol>
  15. 			<canvas id="myCanvas1" style="border: 1px solid #ff0;" width="300" height="200">
  16. 

  17. 			</canvas>
  18. 		</dd>
  19. 	</dl>
  20. 

  21. </body>
  22. <script type="text/javascript">
  23. 	// 保存和恢复canvas
  24. 	var c1=document.getElementById("myCanvas1");
  25. 	var context1=c1.getContext("2d");
  26. 	// 绘制一个矩形
  27. 	context1.fillStyle="#ff00ff";
  28. 	context1.strokeStyle="red";
  29. 	context1.fillRect(20, 20, 100, 100);
  30. 	context1.strokeRect(20,20,100,100);
  31. 	context1.fill();
  32. 	context1.stroke();
  33. 	// 保存当前的状态
  34. 	context1.save();
  35. 	// 绘制另外一个矩形
  36. 	context1.fillStyle="#f00";
  37. 	context1.strokeStyle="green";
  38. 	context1.fillRect(140, 20, 100, 100);
  39. 	context1.fillRect(140, 20, 100, 100);
  40. 	context1.fill();
  41. 	context1.stroke();
  42. 	//恢复第一个矩形的状态
  43. 	context1.restore();
  44. 	//绘制两个矩形
  45. 	context1.fillRect(20, 140, 50, 50);
  46. 	context1.strokeRect(80,140,50,50);
  47. 

  48. 	</script>
  49. </html>
图形的变化---移动坐标空间 
     
     
  1. 

  2. <dl>
		<dt><h1>移动坐标空间</h1></dt>
		<dd>
			<ol>
			    <li>context.translate(dx,dy),dx和dy分变为水平和垂直的便宜量</li>
			    <li>注意：移动之前会先保存画布</li>
			</ol>
		</dd>
</dl>

  3. <canvas id="myCanvas1" style="border:1px solid #ff0" width="300" height="200"></canvas>
  4. 

  5. 

  6. var ctx1=document.getElementById("myCanvas1").getContext("2d");
  7.  	ctx1.translate(50,50);
  8.  	ctx1.fillStyle="#ff0";
  9.  	ctx1.fillRect(0, 0, 100, 100);

     
     

      
      效果
     
     

     
     
  1.
图形的变化--旋转坐标空间： 
      
      
  1. <dl>
  2. 	<dt><h1>旋转坐标空间</h1></dt>
  3. 	<dd>
  4. 		<ol>
  5. 		    <li>方法是rotate(angle)</li>
  6. 		    <li>以原点为中心旋转，顺时针为正，选装的是canvas</li>
  7. 		</ol>
  8. 		<canvas id="myCanvas2" style="border:1px solid #ff0" width="700" height="300"></canvas>
  9. 	</dd>
  10. </dl>
  11. 

  12. 

  13.  	// 旋转坐标空间
  14.  	var ctx2=document.getElementById("myCanvas2").getContext("2d");
  15.  	ctx2.save();
  16.  	ctx2.rotate(Math.PI*1/4);
  17.  	ctx2.fillStyle="#ff00ff";
  18.  	ctx2.fillRect(0, 0, 100, 100);
  19.  	ctx2.restore();

      
      

       
       
       
       

        
         
图形的变化--缩放图形： 
       
       
  1. <dl>
  2. 	<dt><h1>缩放图形</h1></dt>
  3. 	<dd>
  4. 		<ol>
  5. 		    <li>方法scale(x,y)</li>
  6. 		    <li>大于1的值是放大，小于1的值是缩小</li>
  7. 		</ol>
  8. 		<canvas id="myCanvas3" style="border:1px solid #ff0" width="700" height="300">
  9. 

  10. 		</canvas>
  11. 	</dd>
  12. </dl>
  13. 	// 缩放图形
  14.  	var ctx3=document.getElementById("myCanvas3").getContext("2d");
  15.  	ctx3.save();
  16.  	ctx3.fillStyle="#ff00ff";
  17.  	ctx3.scale(1.9,1.1);
  18.  	ctx3.fillRect(100, 100, 100, 100);
  19.  	ctx3.restore();

       
       

        
        结果：
图形的变化--矩阵的变换：
  • 可以实现平移，旋转，缩放，切变和镜像反射
  • 方法：context.transform(m11x,m12y,m21x,m22y,dx,dy);写成矩阵是
  • 矩阵变换后：x`=m11x+m21y+dx;  y`=m12x+m22y+dy;
  • 移动的矩阵：（1,0,0,1，dx,dy）; (0,1,1,0,dx,dy);
  • 缩放的矩阵：（m11,0,0,m22,0,0）;(0,m12,m21,0,0,0);
  • 旋转：（cos0,sin0,-sin0,cose0,0,0）;
  • 将当前的矩阵变换为最初的矩阵：setTransform(m11,m12,m21,m22,dx,dy),会先重置再变换 

图形的组合 
     
     
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.      <meta charset="UTF-8" />
  5.      <title>图形的组合</title>
  6. </head>
  7. <body>
  8.      <dl>
  9.           <dt><h1>图形的组合</h1></dt>
  10.           <dd>
  11.                <ol>
  12.                    <li>globalCompositeOperation，指定它的值，来改变图形的绘制顺序和绘制方式</li>
  13.                    <li>globalAlpha,指定图形的透明度</li>
  14.                    <li>次法放老图形和新图形的中间</li>
  15.                </ol>
  16.           </dd>
  17.      </dl>
  18.      <dl>
  19.           <dt><h1>source-over 默认值</h1></dt>
  20.           <dd>
  21.                <ol>
  22.                    <li>新的图形覆盖在原图形上,默认值，source-over</li>
  23.                </ol>
  24.                <canvas id="myCanvas1" style="border: 1px solid #ff0;" height="200">
  25. 

  26.                </canvas>
  27.           </dd>
  28. 

  29.           <dt><h1>destination-over</h1></dt>
  30.           <dd>
  31.                <ol>
  32.                     <li>原有的图形覆盖在新的图形之上</li>
  33.                </ol>
  34.                 <canvas id="myCanvas2" style="border: 1px solid #ff0;" height="200">
  35. 

  36.                </canvas>
  37.           </dd>
  38. 

  39.            <dt><h1>source-atop</h1></dt>
  40.           <dd>
  41.                <ol>
  42.                     <li>只是绘制原有的内容+重叠部分，且新在原上</li>
  43.                </ol>
  44.                 <canvas id="myCanvas3" style="border: 1px solid #ff0;" height="200">
  45. 

  46.                </canvas>
  47.           </dd>
  48. 

  49.           <dt><h1>destination-atop</h1></dt>
  50.           <dd>
  51.                <ol>
  52.                     <li>只是绘制原有的内容+重叠部分，且原在新的上面</li>
  53.                </ol>
  54.                 <canvas id="myCanvas4" style="border: 1px solid #ff0;" height="200">
  55. 

  56.                </canvas>
  57.           </dd>
  58. 

  59.           <dt><h1>source-in</h1></dt>
  60.           <dd>
  61.                <ol>
  62.                     <li>重叠部分,且新在上</li>
  63.                </ol>
  64.                 <canvas id="myCanvas5" style="border: 1px solid #ff0;" height="200">
  65. 

  66.                </canvas>
  67.           </dd>
  68. 

  69.           <dt><h1>destination-in</h1></dt>
  70.           <dd>
  71.                <ol>
  72.                     <li>重叠部分,且原在上</li>
  73.                </ol>
  74.                 <canvas id="myCanvas6" style="border: 1px solid #ff0;" height="200">
  75. 

  76.                </canvas>
  77.           </dd>
  78. 

  79.           <dt><h1>source-out</h1></dt>
  80.           <dd>
  81.                <ol>
  82.                     <li>新图形-重叠部分</li>
  83.                </ol>
  84.                 <canvas id="myCanvas7" style="border: 1px solid #ff0;" height="200">
  85. 

  86.                </canvas>
  87.           </dd>
  88. 

  89.           <dt><h1>destination-out</h1></dt>
  90.           <dd>
  91.                <ol>
  92.                     <li>原图形-重叠部分</li>
  93.                </ol>
  94.                 <canvas id="myCanvas8" style="border: 1px solid #ff0;" height="200">
  95. 

  96.                </canvas>
  97.           </dd>
  98. 

  99.           <dt><h1>lighter</h1></dt>
  100.           <dd>
  101.                <ol>
  102.                     <li>都显示，重叠部分加色处理</li>
  103.                </ol>
  104.                 <canvas id="myCanvas9" style="border: 1px solid #ff0;" height="200">
  105. 

  106.                </canvas>
  107.           </dd>
  108. 

  109.           <dt><h1>darker</h1></dt>
  110.           <dd>
  111.                <ol>
  112.                     <li>都显示，重叠部分减色处理</li>
  113.                </ol>
  114.                 <canvas id="myCanvas10" style="border: 1px solid #ff0;" height="200">
  115. 

  116.                </canvas>
  117.           </dd>
  118. 

  119.           <dt><h1>copy</h1></dt>
  120.           <dd>
  121.                <ol>
  122.                     <li>只保留新图形</li>
  123.                </ol>
  124.                 <canvas id="myCanvas11" style="border: 1px solid #ff0;" height="200">
  125. 

  126.                </canvas>
  127.           </dd>
  128. 

  129.           <dt><h1>xor</h1></dt>
  130.           <dd>
  131.                <ol>
  132.                     <li>重叠的部分变为透明</li>
  133.                </ol>
  134.                 <canvas id="myCanvas12" style="border: 1px solid #ff0;" height="200">
  135. 

  136.                </canvas>
  137.           </dd>
  138. 

  139.           <dt><h1>globalAlpha</h1></dt>
  140.           <dd>
  141.                <ol>
  142.                     <li>指定图像的透明度</li>
  143.                </ol>
  144.                 <canvas id="myCanvas13" style="border: 1px solid #ff0;" height="200">
  145. 

  146.                </canvas>
  147.           </dd>
  148.      </dl>
  149.      <script type="text/javascript">
  150.           // source-over 默认值
  151.           var ctx1=document.getElementById("myCanvas1").getContext("2d");
  152.           ctx1.fillStyle="red";
  153.           ctx1.fillRect(50, 50, 100, 100);
  154.           ctx1.globalCompositeOperation="source-over";
  155.           ctx1.fillStyle="blue";
  156.           ctx1.beginPath();
  157.           ctx1.arc(150, 125, 50, 0, Math.PI*2, true);
  158.           ctx1.closePath();
  159.           ctx1.fill();
  160. 

  161.           // destination-over 原有的图形覆盖在新图形上
  162.           var ctx2=document.getElementById("myCanvas2").getContext("2d");
  163.           ctx2.fillStyle="red";
  164.           ctx2.fillRect(50, 50, 100, 100);
  165.           ctx2.globalCompositeOperation="destination-over";
  166.           ctx2.fillStyle="blue";
  167.           ctx2.beginPath();
  168.           ctx2.arc(150, 125, 50, 0, Math.PI*2, true);
  169.           ctx2.closePath();
  170.           ctx2.fill();
  171. 

  172.           // source-atop
  173.            var ctx3=document.getElementById("myCanvas3").getContext("2d");
  174.           ctx3.fillStyle="red";
  175.           ctx3.fillRect(50, 50, 100, 100);
  176.           ctx3.globalCompositeOperation="source-atop";
  177.           ctx3.fillStyle="blue";
  178.           ctx3.beginPath();
  179.           ctx3.arc(150, 125, 50, 0, Math.PI*2, true);
  180.           ctx3.closePath();
  181.           ctx3.fill();
  182. 

  183.           // destination-atop
  184.           var ctx4=document.getElementById("myCanvas4").getContext("2d");
  185.           ctx4.fillStyle="red";
  186.           ctx4.fillRect(50, 50, 100, 100);
  187.           ctx4.globalCompositeOperation="destination-atop";
  188.           ctx4.fillStyle="blue";
  189.           ctx4.beginPath();
  190.           ctx4.arc(150, 125, 50, 0, Math.PI*2, true);
  191.           ctx4.closePath();
  192.           ctx4.fill();
  193. 

  194.            // source-in
  195.           var ctx5=document.getElementById("myCanvas5").getContext("2d");
  196.           ctx5.fillStyle="red";
  197.           ctx5.fillRect(50, 50, 100, 100);
  198.           ctx5.globalCompositeOperation="source-in";
  199.           ctx5.fillStyle="blue";
  200.           ctx5.beginPath();
  201.           ctx5.arc(150, 125, 50, 0, Math.PI*2, true);
  202.           ctx5.closePath();
  203.           ctx5.fill();
  204. 

  205.             // source-in
  206.           var ctx6=document.getElementById("myCanvas6").getContext("2d");
  207.           ctx6.fillStyle="red";
  208.           ctx6.fillRect(50, 50, 100, 100);
  209.           ctx6.globalCompositeOperation="destination-in";
  210.           ctx6.fillStyle="blue";
  211.           ctx6.beginPath();
  212.           ctx6.arc(150, 125, 50, 0, Math.PI*2, true);
  213.           ctx6.closePath();
  214.           ctx6.fill();
  215. 

  216.           // source-out
  217.          var ctx7=document.getElementById("myCanvas7").getContext("2d");
  218.           ctx7.fillStyle="red";
  219.           ctx7.fillRect(50, 50, 100, 100);
  220.           ctx7.globalCompositeOperation="source-out";
  221.           ctx7.fillStyle="blue";
  222.           ctx7.beginPath();
  223.           ctx7.arc(150, 125, 50, 0, Math.PI*2, true);
  224.           ctx7.closePath();
  225.           ctx7.fill();
  226. 

  227.           // destination-out
  228.          var ctx8=document.getElementById("myCanvas8").getContext("2d");
  229.           ctx8.fillStyle="red";
  230.           ctx8.fillRect(50, 50, 100, 100);
  231.           ctx8.globalCompositeOperation="destination-out";
  232.           ctx8.fillStyle="blue";
  233.           ctx8.beginPath();
  234.           ctx8.arc(150, 125, 50, 0, Math.PI*2, true);
  235.           ctx8.closePath();
  236.           ctx8.fill();
  237. 

  238.           // lighter
  239.          var ctx9=document.getElementById("myCanvas9").getContext("2d");
  240.           ctx9.fillStyle="red";
  241.           ctx9.fillRect(50, 50, 100, 100);
  242.           ctx9.globalCompositeOperation="lighter";
  243.           ctx9.fillStyle="blue";
  244.           ctx9.beginPath();
  245.           ctx9.arc(150, 125, 50, 0, Math.PI*2, true);
  246.           ctx9.closePath();
  247.           ctx9.fill();
  248. 

  249.           // darker
  250.          var ctx10=document.getElementById("myCanvas10").getContext("2d");
  251.           ctx10.fillStyle="red";
  252.           ctx10.fillRect(50, 50, 100, 100);
  253.           ctx10.globalCompositeOperation="darker";
  254.           ctx10.fillStyle="blue";
  255.           ctx10.beginPath();
  256.           ctx10.arc(150, 125, 50, 0, Math.PI*2, true);
  257.           ctx10.closePath();
  258.           ctx10.fill();
  259. 

  260.           // copy
  261.          var ctx11=document.getElementById("myCanvas11").getContext("2d");
  262.           ctx11.fillStyle="red";
  263.           ctx11.fillRect(50, 50, 100, 100);
  264.           ctx11.globalCompositeOperation="copy";
  265.           ctx11.fillStyle="blue";
  266.           ctx11.beginPath();
  267.           ctx11.arc(150, 125, 50, 0, Math.PI*2, true);
  268.           ctx11.closePath();
  269.           ctx11.fill();
  270. 

  271.           // xor
  272.          var ctx12=document.getElementById("myCanvas12").getContext("2d");
  273.           ctx12.fillStyle="red";
  274.           ctx12.fillRect(50, 50, 100, 100);
  275.           ctx12.globalCompositeOperation="xor";
  276.           ctx12.fillStyle="blue";
  277.           ctx12.beginPath();
  278.           ctx12.arc(150, 125, 50, 0, Math.PI*2, true);
  279.           ctx12.closePath();
  280.           ctx12.fill();
  281. 

  282.            // globalAlpha
  283.          var ctx13=document.getElementById("myCanvas13").getContext("2d");
  284.           ctx13.fillStyle="red";
  285.           ctx13.fillRect(50, 50, 100, 100);
  286.           ctx13.globalAlpha="0.5";
  287.           ctx13.fillStyle="blue";
  288.           ctx13.beginPath();
  289.           ctx13.arc(150, 125, 50, 0, Math.PI*2, true);
  290.           ctx13.closePath();
  291.           ctx13.fill();
  292. 

  293. 

  294.      </script>
  295. </body>
  296. </html>

图形的裁切 
    
    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8" />
  5.   <title>图形的裁切</title>
  6. </head>
  7. <body>
  8.   <dl>
  9.     <dt>
  10.       <h1>图形的裁切</h1>
  11.     </dt>
  12.     <dd>
  13.       <ol>
  14.           <li>clip</li>
  15.           <li>原理是给图形蒙一层蒙版，没有被蒙住的，会被隐藏</li>
  16.           <canvas id="myCanvas" style="border: 1px solid #ff0;" height="300">
  17. 

  18.           </canvas>
  19.       </ol>
  20.     </dd>
  21.   </dl>
  22.   <script type="text/javascript">
  23.     var ctx=document.getElementById("myCanvas").getContext("2d");
  24.     ctx.fillStyle="black";
  25.     ctx.fillRect(0, 0, 300, 300);
  26.     ctx.fill();
  27.      // 绘制圆形
  28.     ctx.beginPath();
  29.     ctx.arc(150, 150, 100, 0 , Math.PI*2 , true);
  30.     // 裁切路径
  31.     ctx.clip();
  32.     ctx.fillStyle="red";
  33.     ctx.fillRect(50,50,150 , 150);
  34.   </script>
  35. </body>
  36. </html>
线型的选择
  • lineWidth：设置线条的粗细，默认值为1；
  • lineCap:设置端点的样式，butt(平头)、round(圆头)、square(方头)；
  • lineJoin:设置连接处样式，round(圆头)、bevel(斜平面)、miter(直头)默认；
  • miterLimit:设置绘制交点的方式，给斜面长度设置一个上限，默认为10，当斜面长度超过线条宽度的10倍的时候，就会变成斜角。只是适用于miter。
绘制渐变
  • 线性渐变：
    • 方法：createLinearGradient(x1,y1,x2,y2), 其中（x1,y1）是起点，（x2,y2）是终点；
    • addColorStop(position,color):position是0~1的浮点；
  • 径向渐变：
    • 方法：createRadialGradient(x1,y1,r1,x2,y2,r2);
    • addColorStop(position,color),position的值是0~1
     
     
  1. // 线性渐变
  2.    var ctx1=document.getElementById("myCanvas1").getContext("2d");
  3.    var lingrad=ctx1.createLinearGradient(0,0,0,200);
  4.    lingrad.addColorStop(1/7,'#ff0000');
  5.    lingrad.addColorStop(2/7,'#ff9900');
  6.    lingrad.addColorStop(3/7,'#00ff00');
  7.    lingrad.addColorStop(4/7,'#00ffff');
  8.    lingrad.addColorStop(5/7,'#0000ff');
  9.    lingrad.addColorStop(6/7,'#ff00ff');
  10.    lingrad.addColorStop(1,'#ff0000');
  11.    ctx1.fillStyle=lingrad;
  12.    ctx1.strokeStyle=lingrad;
  13.    ctx1.fillRect(10,10,200,200);
绘制图案：
  • createPattern(img,type),type是类型，有repeat,repeat-x,repeat-y,no-repeat
  • 注意：先有pattern对象，然后设置fillStyle
  • 可以是img或者canvas
       
       
  1.     <dt><h1>绘制图案</h1></dt>
  2.     <dd>
  3.       <ol>
  4.           <li>createPattern(img,type),type是类型，有repeat,repeat-x,repeat-y,no-repeat</li>
  5.           <li>注意：先有pattern对象，然后设置fillStyle</li>
  6.       </ol>
  7.       <canvas id="myCanvas3" width="600" height="300" style="border: 1px solid #ff0;">
  8. 

  9.       </canvas>
  10.     </dd>
  11. 

  12.    //绘制图案
  13.    var ctx3=document.getElementById("myCanvas3").getContext("2d");
  14.    var img=new Image();
  15.    img.src="banner-ilvcrp.png";
  16.    img.onload=function(){
  17.     var ptrn=ctx3.createPattern(img,'repeat');
  18.     ctx3.fillStyle=ptrn;
  19.     ctx3.fillRect(0,0,600,300);
  20.    }
创建阴影：
  • 用到四个属性：
    • ctx.shadowOffsetX=float;
    • ctx.shadowOffsetY=float;
    • ctx.shadowBlur=flaot;
    • ctx.shadowColor=color;
       
       
  1.  <dt><h1>创阴影建</h1></dt>
  2.       <dd>
  3.         <ol>
  4.             <li>shadowOffsetX</li>
  5.             <li>shadowOffsetY</li>
  6.             <li>shadowBlur</li>
  7.             <li>shadowColor</li>
  8.         </ol>
  9.         <canvas id="myCanvas4" width="600" height="300" style="border: 1px solid #ff0;">
  10. 

  11.         </canvas>
  12.     </dd>
  13. //创建阴影
  14.    var ctx4=document.getElementById("myCanvas4").getContext("2d");
  15.    // 设置阴影
  16.    ctx4.shadowOffsetX=3;
  17.    ctx4.shadowOffset=3;
  18.    ctx4.shadowBlur=2;
  19.    ctx4.shadowColor="rgba(0,0,0,.5)";
  20.    // 绘制矩形
  21.    ctx4.fillStyle="#33ccff";
  22.    ctx4.fillRect(20, 20, 300, 60);
  23.    ctx4.fill();
  24.
绘制文字：
  • 填充文字：ctx.fillText(text,x,y,[maxW]),maxW是显示文字时候的最大的宽度，超过最大的宽度，字儿会变瘦；
  • 绘制文字的轮廓：ctx.strokeText(text,x,y,[maxW])
  • 文字的相关属性：
    • font:
    • textAlign：left/right/center/start/end
    • textBaseline:top/middle/bottom/
  • 测量文字的宽度：measureText(text);
       
       
  1. <dt><h1>绘制文字</h1></dt>
  2.       <dd>
  3.         <canvas id="myCanvas5" width="350" height="200" style="border: 1px solid #ff0;">
  4. 

  5.         </canvas>
  6.     </dd>
  7. 

  8.  // 绘制文字
  9.    var ctx5=document.getElementById("myCanvas5").getContext("2d");
  10.    ctx5.font="italic 35px 黑体";
  11.    ctx5.fillStyle="red";
  12.    ctx5.fillText("绘制填充文字",30,60,200);
  13.    ctx5.strokeStyle="blue";
  14.    ctx5.strokeText("绘制轮廓文字",30,120,200);
  15.    // 测量文字的宽度
  16.    var txt1="我是要测量宽度的文字";
  17.    ctx5.fillText(txt1,30,140);
  18.    var mtxt1=ctx5.measureText(txt1);
  19.    ctx5.fillText(mtxt1.width,160,80);
操作和使用图像：
  • 引入图像：ctx.drawImage(img,x,y);
  • 改变图像大小：ctx.drawImage(img,x,y,w,h);
  • 创建图像切片：ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)，
    • sx,sy:指得是被原图的被裁切区域的起始位置
    • sw,sh:指得是被裁切的宽度和高度
    • dx,dy:在画布上显示的位置
    • dw,wh:在画布上显示的宽和高
  • 注意：为了实现图片预加载，先创建img，然后使用onload方法，最后指定url
       
       
  1.  // 引入图像
  2.    var ctx6=document.getElementById("myCanvas6").getContext("2d");
  3.    var img=new Image();
  4.    img.onload=function(){   //这样可以实现预加载
  5.     ctx6.drawImage(img,0,0);
  6.    };
  7.    img.src='banner-ilvcrp.png';
  8. 

  9.    // 改变图像大小
  10.    var ctx7=document.getElementById("myCanvas7").getContext("2d");
  11.    var img=new Image();
  12.    img.onload=function(){   //这样可以实现预加载
  13.     ctx7.drawImage(img,0,0,300,100);
  14.    };
  15.    img.src='banner-ilvcrp.png';
  16. 

  17.    // 创建图像切片
  18.    var ctx8=document.getElementById("myCanvas8").getContext("2d");
  19.    var img=new Image();
  20.    img.onload=function(){   //这样可以实现预加载
  21.     ctx8.drawImage(img,0,0,300,200,0,0,400,300);
  22.    };
  23.    img.src='banner-ilvcrp.png';
大厂女程序媛
关注
专栏目录
H5~画布
m0_73849466的博客
12-05 662
h5~画布，验证码
HTML5的画布
Han_Zhou_Z的博客
11-12 452
目录 一、H5中的画布标签 二、获取画布 三、获取画笔 四、画直线 五、线条的路径 六、图形填充 七、绘制圆 一、H5中的画布标签 <canvas id="画布的名称" width="宽度" height="高度"> </canvas> 二、获取画布 var cas = document.getElementById("画布的名称") 三、获取画笔 context对象，使用该对象可以在画布上绘制图形 var ctx = cas.getContext(
H5的canvas画布使用
木头房子的格子铺
08-14 7876
H5的canvas canvas画布 canvas上绘制图形 canvas给绘制的图形设置样式 canvas中绘制图像 canvas中的变形 canvas标签
H5学习笔记3——画布
最新发布
wy2015_wy2015的博客
09-09 730
向 HTML5 页面添加 canvas 元素。
HTML5画布
m0_48375854的博客
11-11 1767
HTML画布一、画布的使用1、使用画布1、创建画布2、获取画布3、准备画笔2、绘制线1、初始位置2、连线端点 一、画布的使用 画布是在页面中绘制图形的特殊区域 1、使用画布 1、创建画布 使用HTML5中的canvas标签可以在网页中创建画布。 语法格式： <canvas id="画布名称" width="数值" height="数值"> 您的浏览器不支持canvas </canvas> 2、获取画布 要想在JavaScript中控制画布，首先要获取画布。使用getElement
HTML5 Canvas 图形组合
歪脖先生的博客
04-24 1444
图形组合 在canvas中绘制复杂图形时，经常会出现图形交叉的情况，canvas把图形交叉的情况称作组合。 通过上下文对象的globalCompositeOperation属性来设置图形的组合方式，该属性的取值及其含义见表 4‑5。其中，source指新绘制的图形，而destination指原有的图形，默认值是source-over。 表 4‑5 globalComposit
H5画布 canvas（一）canvas简介、绘制圆形矩形、案例饼状图绘制
m0_67401382的博客
08-01 475
canvas是HTML5提供的一种新标签，与div类似，是一个矩形的画布，它可以支持JavaScript在上面绘画，控制每一个像素；canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，可以使得页面更加丰富多彩。当前canvas广泛应用于游戏、可视化数据(echarts)、广告等领域。canvas其实就是一个普通的HTML标签，需要进行闭合，可以设置宽高、背景色属性，但宽高单位必须是px，否则就会被忽略；一个canvas默认为300*150像素。...
H5画布 canvas 入门到精通 _ 第二部分(绘制文字、图片、坐标系，canvas颜色和样式，canvas绘制环境)
m0_54866636的博客
02-23 1136
目录 1. 绘制文字 2. 绘制图片(drawImage) （1）基本绘制方法 （2）案例：序列帧动画 3. 绘制坐标系 4. canvas 颜色样式和阴影 5.?复杂样式 （1）渐变 （2）绘制背景图 （3）变换（重点） 6. 绘制环境的相关操作 1. 绘制文字 **ctx.font；**设置文本内容的字体属性，使用方式与 css font 相同 **ctx.textAlign；**设置文本内容的对齐方式 start：默认，文本在指定的位置开始 end：文本在指定的位置结束 center：文本的中
H5画布canvas特效（砖块放射效果）
Tino's Space
02-09 1851
H5画布 canvas 入门到精通 _ 第三部分(canvas 库 Konva.js 的使用)
m0_67266787的博客
03-03 1476
目录 一、Konva 基本概念 二、Konva 的使用 1. 引入 Konva 2. Konva 基本绘制步骤 三、Konva 动画 1. tween 对象 2. 动画 to 方法的使用 3. 循环播放动画 四、案例：使用 Konva 绘制进度条 一、Konva 基本概念 Konva.js，全称适用于桌面/移动端应用的 HTML5 2d canvas 库，是一个HTML5 Canvas JavaScript 框架，它提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能。你
H5画布canvas特效（旋转跳跃不停歇）
Tino's Space
12-27 3724
.panel{ margin:20% auto auto 35%; } .input{ width:500px; height:30px; } .btn{ width:515px; height:40px; } .input_form{ float:left; margin:-35% 0 0 25%; position:absolute; } Login function proje
HTML5 canvas基本绘图之图形组合
09-28
是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之图形组合方法，感兴趣的小伙伴们可以参考一下
html5 画布例子
02-06
html5 canvas画布例子，一个连线的游戏
H5--画布canvas
Yi_xuan_sky的博客
08-16 453
        &lt;canvas id = "drawing"&gt;你的浏览器不支持canvas&lt;/canvas&gt;         当浏览器不支持canvas的时候，就会显示"你的浏览器不支持canvas"；         首先获取元素：var canvas= document.getElementById("drawing");         然后设置宽高：canva...
H5基础（画布）
2201_75624032的博客
12-19 412
arc(): 设置圆 参数1: 圆心x 参数2：圆心 y 参数3： 半径 参数4： 起始角度 参数5：结束角度 360 * Math.PI / 180。arc(): 设置圆 参数1: 圆心x 参数2：圆心 y 参数3： 半径 参数4： 起始角度 参数5：结束角度 360 * Math.PI / 180。rect(): 设置矩形 参数1：x 参数2： y 参数3： width 参数4： height。rect(): 设置矩形 参数1：x 参数2： y 参数3： width 参数4： height。
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
热门推荐
商务合作 | 共同学习 | 携手共进
02-18 10万+
canvas 简介、canvas 绘图基础(标签介绍、上下文context、beginPath 状态)、案例：绘制表格、绘制饼状图。
h5画布工具
weixin_54443782的博客
07-15 273
先在html中创建一个canvas标签，这个标签用来创建画布，默认的大小为300*150.在这个标签里面写的文字不会在网页显示，只有当浏览器的版本不支持画布的时候，才会显示标签里的文字。唯一比较难理解的就是半圆的起始和结束的方向，还有要计算坐标。今天学的画圆，然后制作了一个大风车，其实也没有很难，请看。像哪边便宜就乘以几Π。......
HTML5 Canvas画布讲解
weixin_55639808的博客
12-15 793
HTML5 Canvas画布讲解
基于H5 Canvas实现手势解锁功能
"h5使用canvas画布实现手势解锁" 本文主要介绍了使用H5的Canvas画布来实现手势解锁功能的过程和原理。手势解锁是指用户通过绘制图案来解锁应用程序的功能，当前实现手势解锁的方式有原生实现和H5实现两种，本文主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值