<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <canvas id="myCanvas" style="border:1px solid red" width="300" height="300"></canvas>
    <script>

        function draw(){
            var ctx = document.getElementById('myCanvas').getContext('2d');
            //绘制背景
            ctx.fillStyle="yellow";
            ctx.fillRect(0,0,300,300);
            ctx.fill();
            //绘制圆形
            ctx.beginPath();
            ctx.arc(150,150,130,0,Math.PI*2,true);
            //裁剪路径
          //  ctx.clip();
            ctx.translate(200,20);
            for(var i=0;i<90;i++){
                ctx.save();
               ctx.transform(0.98,0,0,0.95,30,30);
                ctx.rotate(Math.PI/12);
                ctx.beginPath();
                ctx.fillStyle="red";
                ctx.globalAlpha="0.4";
                ctx.arc(0,0,50,Math.PI*2,true);
                ctx.closePath();
                ctx.fill();
            }
        }
        window.onload=function(){
            draw();
        }
    </script>
</body>
</html>

												


											
canvas 旋转的更多相关文章
	

    
						
  1. html5 canvas旋转
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    2. 
						
  2. canvas旋转文本
		
    canvas旋转文本 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
    
		
    3. 
						
  3. canvas旋转图片
		
    canvas旋转图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
    
		
    4. 
						
  4. Canvas旋转元素
		
    Canvas是HTML5的画布元素,有时需要按指定角度旋转某一个元素. var canvas = document.getElementById("mycanvas"); var  ...
    
		
    5. 
						
  5. Canvas旋转图片--保持相同大小的算法
		
     function drawImg(angle) {     canvas.width = canvas.width; var distance = size / 2 * Math.sqrt(2)  ...
    
		
    6. 
						
  6. Canvas 旋转风车绘制
		
    写在前面:   亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写的不好的地方,烦请同学们谅解,如果本文对你有一丁点帮助,还请劳驾您给我点个赞,您的认可将是我坚持下去的强大动力!谢谢! 在进行教学之前 ...
    
		
    7. 
						
  7. html5 canvas旋转+缩放
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    8. 
						
  8. html5 canvas 旋转扩大
		
    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    9. 
						
  9. Canvas 旋转的图片
		
    var image = new Image(), counter = 0; image.onload = function () { var CANVAS_WIDTH = 300, CANVAS_HE ...
    
		
    10. 
				

	


随机推荐
	

    
									
  1. Oracle 循环查询
			
    select * from sys_department start with departmentid = '0303e461-2454-4d5a-bfea-2cd5a4c064c6' connec ...
    
			
    2. 
						
  2. JS stringObject.Match()
			
    JavaScript match() 方法 JavaScript String 对象 定义和用法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 inde ...
    
			
    3. 
						
  3. ORACLE重装之后恢复数据库,相当于sqlserver的附加数据库
			
    在开发机器上经常会遇到重装系统的问题,重装之前如果ORACLE没有及时备份的话重装之后就纠结了,数据还原很头疼. 各种娘中只能找到一些ORACLE安装与重装系统前目录相同的解决办法,目录不同就没招了. ...
    
			
    4. 
						
  4. spring boot 接口用例测试
			
    接口: 测试用例:
    
			
    5. 
						
  5. gdb 使用
			
    2018年7月27日21:05:16 —— 多进程调试 1.follow_fork_mode 作用:在fork之后跟随父进程还是子进程 可以使用 show follow_fork_mode查看再for ...
    
			
    6. 
						
  6. 注解_Annotation
			
    ---恢复内容开始--- 一.什么是注解 注解,英文Annotation,它不是程序本身,是对程序的解释,在这里我会想到为什么不能使用注释呢,因为注解是关于程序对信息的处理的流程的一些说明,而且格式也 ...
    
			
    7. 
						
  7. JavaScript获取、修改CSS样式合辑
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    8. 
						
  8. 在chrome console添加jQuery支持
			
    有时候想在chrome console使用jq,那么下面这段代码就可以完美解决问题了. var script = document.createElement('script');script.src ...
    
			
    9. 
						
  9. MySQL InnoDB内存压力判断以及存在的疑问
			
    本文出处:http://www.cnblogs.com/wy123/p/7259866.html(保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错误 ...
    
			
    10. 
						
  10. 使用jQuery+huandlebars遍历中if判断
			
    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
    
			
    11.