<!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. input输入完成后监听
			
    clearTimeout(serachtimer); serachtimer=setTimeout(function(){ xxxxxxx //这里写处理的方法 },1000)
    
			
    2. 
						
  2. vlan划分
			
    1.vlan:虚拟局域网: 作用:划分广播域,抑制广播风暴: 2.vlan技术的优点: 有效控制广播域范围: 增强局域网的安全性: 灵活构建虚拟工作组: 3.vlan划分的方式: 基于端口: 基于MA ...
    
			
    3. 
						
  3. 批量移动AD用户到指定OU
			
    原文链接:http://blog.51cto.com/shubao/1346469 作为域管理员,在日常工作中使用ADUC(AD用户和计算机)工具在图形界面中进行账号管理操作可谓是家常便饭了.然而一个 ...
    
			
    4. 
						
  4. leetcode10
			
    class Solution { public boolean isMatch(String s, String p) { if (s == null || p == null) { return f ...
    
			
    5. 
						
  5. python Django 无法获取post 参数问题
			
    对于 request.POST.get(name) 方式取值,需要 from 表单提交数据,如果 是ajax 提交数据,则需要做如下设置: 1.设置请求头,以from表单方式传值 'Content-T ...
    
			
    6. 
						
  6. Linux中近期使用高频命令小结
			
    配置定时任务命令crontab : 用来增加系统的定时任务,可以指定用户,时间,以及相关指令: 查看端口是否相通,扫描端口nc: nc -v ip地址 端口号: 转换格式命令dos2unix: 用来将 ...
    
			
    7. 
						
  7. 网络抓包工具 wireshark 入门教程
			
    Wireshark Wireshark(前称Ethereal)是一个网络数据包分析软件.网络数据包分析软件的功能是截取网络数据包,并尽可能显示出最为详细的网络数据包数据.Wireshark使用WinP ...
    
			
    8. 
						
  8. C++ queue
			
    queuequeue 模板类的定义在<queue>头文件中.与stack 模板类很相似,queue 模板类也需要两个模板参数,一个是元素类型,一个容器类型,元素类型是必要的,容器类型是可选 ...
    
			
    9. 
						
  9. 20175314 实验一 Java开发环境的熟悉
			
    20175314 实验一 Java开发环境的熟悉 一.实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA 编辑.编译.运行.调试Java程序. 3.完成实验,撰写实验报告,注意实 ...
    
			
    10. 
						
  10. 186. Reverse Words in a String II 翻转有空格的单词串 里面不变
			
    ［抄题］: Given an input string , reverse the string word by word. Example: Input: ["t"," ...
    
			
    11.