<!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. 常见的php模式
			
    php中6种常见的设计模式 单例模式 观察者模式 策略模式 工厂模式 注册模式 适配器模式 单例模式 Db.php<?php /** * 单例模式 */ class Db { private s ...
    
			
    2. 
						
  2. 虚拟机安装centOs+网络配置(完整说明)
			
    1.新建虚拟机(标准)   选择 (我以后下安装操作系统)       选择Linux 操作系统 版本为CentOS(32位)     虚拟机的名称和位置任意       磁盘容量如下即可     设 ...
    
			
    3. 
						
  3. Laravel中队列的使用
			
    以laravel5.5为例子: 1.配置队列:composer require "predis/predis:~1.0" a.在ENV中配置:QUEUE_DRIVER=redis  ...
    
			
    4. 
						
  4. Oracle SQL 优化规则
			
    一.问题的提出 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用 系统提交实际应用后,随着数据库中数据的增加,系 ...
    
			
    5. 
						
  5. IntelliJ IDEA  调试技巧
			
    程序员的工作内容,有不少的时间是用在调试代码上.可以说不是在调试代码,就是即将调试代码. 掌握调试代码的一些技巧,在使用IDE提供的debugger时会快速定位问题的方式. 1.多线程调试 在多线程应 ...
    
			
    6. 
						
  6. shareSdk分享图片
			
    /** * 只分享图片 * * @param bitmap bitmap */ private void sharedImage(Bitmap bitmap) { RxPermissions rxPe ...
    
			
    7. 
						
  7. orcal安装
			
    1.下载安装包(版本32位或64位)下载网址:https://www.oracle.com,建议关闭防火墙(可以的话关闭网) 2.将两个安装包解压为一个安装包 3.点击执行 3. 4. 5. 5. 6 ...
    
			
    8. 
						
  8. 201772020113 李清华《面向对象程序设计（java）》第三周学习总结
			
    一.测试题反思: 这次的测试题暴露出我在学习上的很多问题:首先,编程能力非常薄弱,编程题目只写出了第一个程序,还因为小问题通不过测试,以后一定要多上手练习,多阅读示例程序.其次,对理论知识的掌握不全面 ...
    
			
    9. 
						
  9. 【Noip模拟 20160929】选数
			
    题目描述 现在有一排共N个数,你需要从中选出恰好K个.选出K个数后,计算它们两两差值的绝对值的最小值S.你需要确定选出哪K个,才能最大化这个S. 输入数据 输入第一行两个正整数N.K,含义如上. 输入 ...
    
			
    10. 
						
  10. uname命令详解
			
    1.简介: uname命令用于打印当前系统相关信息(内核版本号.硬件架构.主机名称和操作系统类型等). 2.命令语法: uname (选项) 3.选项: -a或--all:显示全部的信息: -m或-- ...
    
			
    11.