<!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. 10-安装es
			
    1.安装jdk(jdk要求1.8.20或1.7.55以上) 2.上传es安装包 3.解压es tar -zxvf elasticsearch-2.3.1.tar.gz -C /opt/app/ 4.e ...
    
			
    2. 
						
  2. junit 基础使用
			
    junit百度百科: JUnit是一个Java语言的单元测试框架.它由Kent Beck和Erich Gamma建立,逐渐成为源于Kent Beck的sUnit的xUnit家族中最为成功的一个. JU ...
    
			
    3. 
						
  3. zabbix安装脚本
			
    #!/bin/bash # #安装zabbix源.aliyun YUM源 #curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyu ...
    
			
    4. 
						
  4. xtrabackup备份还原MySQL数据库
			
    mysqldump 备份鉴于其自身的某些特性(锁表,本质上备份出来insert脚本或者文本,不支持差异备份),不太适合对实时性要求比较高的情况Xtrabackup可以解决mysqldump存在的上述的 ...
    
			
    5. 
						
  5. sublime3支持es6语法和vue彩色显示
			
    支持ES6语法设置: 首先安装nodejs 当然你可以使用其它诸如jsc之类的环境来运行js, 本文使用的是nodejs. 首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量中 (一般安 ...
    
			
    6. 
						
  6. gitlab 502
			
    经过一个下午的查找终于发现了错误,原来是在服务器上还开启了一个tomcat服务,占用了8080端口,使GitLab的unicorn服务不能开启. 最后在/etc/gitlab/gitlab.rb 中做 ...
    
			
    7. 
						
  7. javascript中的类型检测
			
    最常见的是使用 typeof 来判断数据类型 可以区分4种基本类型,即 “number”,”string”,”undefined”,”boolean”,第5种基本类型null类型返回值为object( ...
    
			
    8. 
						
  8. python中的元组
			
    在python中,元组是不可变类型 可通过以下案例说明: >>> c1 = ['1','2'] >>> c = (1,2,c1) >>> c (1 ...
    
			
    9. 
						
  9. java基础 -------   多重循环  and   break与continue
			
    -----  什么是多重循环 ----   打印数列 public class ForEx { public static void main(String[] args){ for(int i =  ...
    
			
    10. 
						
  10. java_20 LinkedList类
			
    LinkedList类特有的方法 (1)addLast()  将指定元素添加到此列表的结尾. addFirst() 将指定元素添加到此列表的开始. public static void main(St ...
    
			
    11.