<!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. maven的安装和配置
			
    这篇文章主要是对maven安装说明,以便后续翻阅,本人刚接触,请多见谅! 1.maven官网下载:http://maven.apache.org/download.cgi 2.解压到你想要放的路径里, ...
    
			
    2. 
						
  2. Java double 加、减、乘、除
			
    double类型的数值接相加的时候,结果可能出现精度误差为此Java提供了高精度计算的方法:java.math.*里面提供了BigDecimal类 import org.junit.Test; imp ...
    
			
    3. 
						
  3. TCARS: Time- and Community-Aware Recommendation  System(时间感知和社区感知推荐系统)
			
    随着用户在物品上产生了大量行为,推荐系统成为了线上系统的重要组成部分.推荐系统算法使用用户对物品的行为信息以及上下文数据为每个用户推荐一组物品.算法根据用户之间及物品之间的相似度建立.本文介绍了一个基 ...
    
			
    4. 
						
  4. threading 多线程使用
			
    实例 1import threading #线程import time def Say(n): print('Test %d' %n) time.sleep(2) if __name__ == '__ ...
    
			
    5. 
						
  5. 异步请求Ajax（取得json数据）
			
    异步请求Ajax 没有学习Ajax之前请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源.但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异 ...
    
			
    6. 
						
  6. CentOS 7 无法yum安装解决方法
			
    1)下载repo文件 wget http://mirrors.aliyun.com/repo/Centos-7.repo 2)备份并替换系统的repo文件 .repo /etc/yum.repos.d ...
    
			
    7. 
						
  7. 为Firefox浏览器安装Firebug插件
			
    一.确保联网 二.打开Firefox 三.菜单:工具 -> 附加组件 显示附加组件管理器界面,点扩展 在搜索框输入firebug,搜,在搜索结果列表中找到Firebug项,安装 安装进度 安装完 ...
    
			
    8. 
						
  8. LevelDB源码分析-编码
			
    编码(util/coding.h util/coding.cc) LevelDB将整型编码为二进制字符串的形式,同时又能够和ASCII字符区分. 首先是定长编码: void EncodeFixed32 ...
    
			
    9. 
						
  9. faster-RCNN框架之rpn　较小目标检测，如果只使用ｒｐｎ，并减少多个候选框
			
    通常faster-rcnn目标检测有两个步骤,一个是侯选框生成,一个是侯选框微调+目标区分,但是对于单目标识别, 我经常喜欢只使用rpn网络,效果还不错,不过仅仅的rpn使用参考的参数通常会造成一个目 ...
    
			
    10. 
						
  10. jQuery 新添加元素事件绑定无效
			
    jQuery中事件绑定,大多使用on就足够了. 但是对于新添加的元素 on 的绑定事件 会不起作用. 因为 append 中的 节点是在整个文档加载之后才添加的,页面并不会为未来的元素初始化添加点击事 ...
    
			
    11.