<!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. SpringBoot 出现Whitelabel Error Page 解决办法
			
    这是咋了,咋的就404了 我路径也挺对的啊 注解也都写上了啊 咋就找不到了呢? debug吧它不进方法 看日志吧,他还不报错 这家伙给我急的 百度一下午也没解决,最后还是看官网才知道错在了那里,程序只 ...
    
			
    2. 
						
  2. GIL计算python 2 和 python 3 计算密集型
			
    首先我画了一张图来表示GIL运行的方式: Python 3执行如下计算代码:#-*-conding:utf-8-*-import threading import timedef add(): n = ...
    
			
    3. 
						
  3. 操作系统切换CPU的方式
			
    操作系统切换CPU的方式 1 IO等待切换. 2 时间轮询切换,也就是如果没有IO等待的情况下,就会有时间轮询切换,不让CPU一直处理一个任务   CPU的处理速度是纳秒级别的,所有我们可以同时听歌, ...
    
			
    4. 
						
  4. vmware 里MAC  鼠标能移动 无法单击
			
    vmware 里MAC  鼠标能移动 无法单击 移动有效果,能看到鼠标移动的光标,鼠标放到mac的图标上还有提示,就是无法单击. 键盘正常. 重启mac,重启vmware 20次好了,2小时.
    
			
    5. 
						
  5. sourcetree合并分支
			
    参考: https://blog.csdn.net/qq_34975710/article/details/74469068
    
			
    6. 
						
  6. centos 7  一键安装gitlab
			
    # cat /etc/redhat-release CentOS release 6.5 (Final) # strings /lib64/libc.so.6 |grep GLIBC_ 首先升级 如果 ...
    
			
    7. 
						
  7. Cdnbest的cdn程序默认支持web Socket
			
    Cdnbest的cdn程序默认支持web Socket    WSS 是 Web Socket Secure 的简称, 它是 WebSocket 的加密版本. 我们知道 WebSocket 中的数据是 ...
    
			
    8. 
						
  8. 清理SqlServer日志
			
    最近做一个数据采集的项目,使用SQLSserver2014数据库 没想到数据才采集两三天,C盘空间已经剩下8M 连忙看了一下SQLSerevr数据库文件夹 位于 C:\Program Files\Mi ...
    
			
    9. 
						
  9. 【Unity】打包安卓APK常见问题
			
    问题:unity error invalid command android 原因:Android版本较新,Unity版本太旧(如4.X),Unity打包APK时调用Android工具使用的命令已被安 ...
    
			
    10. 
						
  10. 业务数据实体（model） 需要克隆的方法
			
    业务数据实体(model) 需要克隆的时候 可以使用 Json.Deserialize<InquireResult>(Json.Serialize<InquireResult> ...
    
			
    11.