<!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. REST framwork之分页器，路由器，响应器
			
    一 REST framwork分页器: from rest_framework.pagination import PageNumberPagination,LimitOffsetPagination ...
    
			
    2. 
						
  2. async+await一起使用
			
    /** get 请求 * @param {接口地址} url * @param {请求参数} params */ get(url,params){ return new Promise((resolv ...
    
			
    3. 
						
  3. MYSQL5.7实时同步数据到TiDB
			
    操作系统:CentOS7 mysql版本:5.7 TiDB版本:2.0.0 同步方法:使用TiDB提供的工具集进行同步 说明: 单机mysql同步时,可以直接使用binlog同步, 但mysql集群进 ...
    
			
    4. 
						
  4. python基础之从认识python到python的使用
			
    python的历史: python的创始人是吉多·范罗苏姆(Guido van Rossum),人称“龟叔”,1989年圣诞节期间,Guido开始写Python语言的编译器.他希望这个叫做Python ...
    
			
    5. 
						
  5. 学习C++，应该循序渐进的看哪些书？
			
    在某博客上看到的一个C++书籍阅读清单,可以参考下: 阶段 1<Essential C++>这是一本内容不多但很实用的C++入门书籍,强调快速上手与理解C++编程.本书主要围绕一系列逐渐复 ...
    
			
    6. 
						
  6. 03 字符串常用操作方法及For 循环
			
    字符串常用操作 s = 'alexWUsir' s1 = s.capitalize() #首字母大写 print(s1) #Alexwusir s2 = s.upper() #全部大写 print(s ...
    
			
    7. 
						
  7. <记录> HtmlHelper和 强类型页面
			
    HtmlHelper  路径生成 <!--普通写法--> <a href="/home/index">超链接</a> <!--利用Url类 ...
    
			
    8. 
						
  8. vuejs如何在服务器部署
			
    title: vuejs如何在服务器部署 date: 2017-10-31 20:41:03 tags: [vue] --- 上传到网站服务器 Vue 是一个 javascript 的前端框架,它是运 ...
    
			
    9. 
						
  9. 29.Hibernate-二级缓存和session管理.md
			
    目录 1.概念 1.1一级缓存: 1.2二级缓存: 2.使用方法 3.策略 3.1缓存策略 3.2集合缓存 3.3查询缓存 5. Seesion管理 1.概念 Hibernate提供的缓存 有一级缓存 ...
    
			
    10. 
						
  10. 关于EXCEPT和INTERSECT的用法和例子
			
    EXCEPT是指在第一个集合中存在,但是不存在于第二个集合中的数据. INTERSECT是指在两个集合中都存在的数据. select qq from #table1 如下: select qq fro ...
    
			
    11.