canvas-畫旋轉的八卦

阿新 • • 發佈：2018-11-13

一、程式碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border: 1px solid;
            }
            .anniu{
                width:100px;
                height 
: 35px;
                font-family: "微軟雅黑";
                font-size: 15px;
                background-color: darkgrey;
                border-radius: 10px;
                color: white;
                border: none;
                font-weight: bold;
                cursor: pointer;
                margin 
: 15px;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas"></canvas>
        <input type="button"  onclick="ssz()" value="按順時針旋轉" class="anniu" />
        <input type="button"  onclick="lsz()" value="按逆時針旋轉" class="anniu"/>
        <input 
 type="button"  onclick="zt()" value="暫停" class="anniu"/>
        <input type="button"  onclick="qj()" value="前進" class="anniu"/>
        <script type=" text/javascript">
            var mycanvas;
            var hb;
            var jiaodu=0;
            var jiaodu1=0;
            var jiaodu2=0;
            var zhaunxiang=1;
            var zhuanxiang1=1;
            var zhuanxiang2=1;
            var sszid=0;
            var lszid=0;
            var qjid=0;
            var x1=1250,y1=300;
            var x2=100,y2=300;
            window.onload=function(){
                mycanvas=document.getElementById("mycanvas");
                mycanvas.width=1350;
                mycanvas.height=400;
                hb=mycanvas.getContext("2d");
                hb.fillStyle="gray";
                hb.fillRect(0,0,1350,400);
                drawtaiji(1250,300,100,0);
                drawtaiji(100,300,100,0);
            };
            function qj(){
//              clearInterval(lszid);
//              clearInterval(sszid);
                if(qjid==0){
                    qjid=setInterval(function(){
                        hb.clearRect(0,0,1350,400);
                        hb.fillStyle="gray";
                        hb.fillRect(0,0,1350,400);
                        drawtaiji(x1,y1,100,jiaodu1);
                        drawtaiji(x2,y2,100,jiaodu2);
                        jiaodu1++;jiaodu2--;
                        var zhouchang=Math.PI/180*100;
                        x1+=zhouchang*zhuanxiang1;
                        if(x1>=1250){
                            zhuanxiang1=-1;
                        }
                        else if(x1<=100){
                            zhuanxiang1=1;
                        }
                        x2+=zhouchang*zhuanxiang2;
                        if(x2>=1250||x2<=100){
                            zhuanxiang2*=-1;
                        }
                    },10);
                }
            }
            function ssz(){
                if(sszid==0){
                    clearInterval(lszid);
                    sszid=setInterval(function(){
                        hb.clearRect(0,0,1350,400);
                        hb.fillStyle="gray";
                        hb.fillRect(0,0,1350,400);
                        drawtaiji(x1,y1,100,jiaodu);
                        drawtaiji(x2,y2,100,-jiaodu);
                        jiaodu+=zhaunxiang;
                    },10);
                }
                lszid=0
            }
            function lsz(){
                if(lszid==0){
                    clearInterval(sszid);
                    lszid=setInterval(function(){
                        hb.clearRect(0,0,1350,400);
                        hb.fillStyle="gray";
                        hb.fillRect(0,0,1350,400);
                        drawtaiji(x1,y1,100,jiaodu);
                        drawtaiji(x2,y2,100,-jiaodu);
                        jiaodu-=zhaunxiang;
                    },10);
                }
                sszid=0
            }
            function zt(){
                    clearInterval(lszid);
                    clearInterval(qjid);
                    qjid=0;
                    lszid=0;
                    jiaodu=0;
                    clearInterval(sszid);
                    sszid=0;
            }
            function drawtaiji(x,y,R,jiaodu){
                //Math.PI/180表示每一角度對應的弧度（pi），乘以角度就是對應的弧長
                var hudu=Math.PI/180*jiaodu;
                //建立黑大半圓
                hb.beginPath();
                hb.arc(x,y,R,hudu,hudu+Math.PI);
                hb.fillStyle="black";
                hb.fill();
                //建立白大半圓
                hb.beginPath();
                hb.arc(x,y,R,hudu+Math.PI,hudu);
                hb.fillStyle="white";
                hb.fill();
                //建立白小完整圓
                hb.beginPath();
                hb.arc(x+(R/2*Math.cos(hudu)),y+(R/2*Math.sin(hudu)),R/2,0,2*Math.PI);
                hb.fillStyle="white";
                hb.fill();
                //建立黑小完整圓
                hb.beginPath();
                hb.arc(x-(R/2*Math.cos(hudu)),y-(R/2*Math.sin(hudu)),R/2,0,2*Math.PI);
                hb.fillStyle="black";
                hb.fill();
                //建立實心黑圓
                hb.beginPath();
                hb.arc(x+(R/2*Math.cos(hudu)),y+(R/2*Math.sin(hudu)),10,0,2*Math.PI);
                hb.fillStyle="black";
                hb.fill();
                //建立實心白圓
                hb.beginPath();
                hb.arc(x-(R/2*Math.cos(hudu)),y-(R/2*Math.sin(hudu)),10,0,2*Math.PI);
                hb.fillStyle="white";
                hb.fill();
            }
        </script>
    </body>
</html>

二、效果圖
這裡寫圖片描述

canvas-畫旋轉的八卦

一、程式碼 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

HTML5---Canvas-畫線，空心圖，矩形，文字，三角形，旋轉圖片

</pre><pre name="code" class="html"><!doctype html> <html> <head></head> <body> <canvas widt

canvas 畫繞圓心旋轉的扇形

先看效果圖（為了顏色對比明顯，搭配的顏色比較醜，大家可根據專案修改顏色）：上程式碼：（1）css部分： .middleCircle { display: flex; align-items: center; justify-c

android使用canvas畫線，位移，旋轉，繪製五角星

為了提高自己的開發水平，就想系統地學習一下Android自定義控制元件。首先呢就要從Paint和canvas學起了，與本文主題相關的有關於canvas的畫線：

canvas畫小球

小球 idt pat req wid () height canvas += <canvas id="can" width="600px" height="300px" style="border: 1px solid black"></canvas&g

canvas 畫一個鐘表

document move ets center logs con pre col 直接只是作為練習，沒怎麽抽象，都放在函數裏面，只是簡單的實現。首先說下思路，將一個圓分成12份做表盤，然後用lineTo等方法話指針，最後用一個setInterval刷新畫布，讓指針每隔

canvas畫圓

基礎 als sla minutes getc ext stroke scrip ont <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

canvas畫畫板

doc spl cal control fun lin client -m 橡皮擦制作一個畫畫板，有清屏有橡皮擦有畫筆可以換顏色 style樣式 <head> <meta charset="UTF-8"> <title>

Canvas-圖片旋轉

旋轉 mage contex font 了解獲取 document 一半屬性 Canvas-圖片旋轉眾所周知canvas是位圖，你可以在裏面渲染你要的東西，不過你只能操作canvas的屬性來進行編輯。就是說你並不能操作畫進canvas的東西，例如我在canvas裏添

canvas畫流程圖

body 1.3 new fill title sep ext ++ blog 用canvas畫流程圖：需求：最後一個圓圈無直線遇到問題：需要畫多個圓圈時，畫布超出顯示屏加滾動條，解決方法是<canvas>外層<div>的width=100%，且

canvas畫圓類似於鋸齒指針 angular5

旋轉 clock time 角度 body tran 新路 cancel spa 拿到圖的時候大致是這樣的，裏面的圓是有動態效果的，考慮到gif圖耗資源，於是想要用canvas畫出來；仔細看圖不難發現，這個鋸齒圓類似於表盤，計算好弧度，不難實現；因為項目現在用的框架是

canvas 畫線

document rgba pla lan border draw ctx 多邊形正方一、canvas是基於狀態的繪圖環境 1、canvas是基於狀態的繪制 context.moveTo(100,100); context.lineTo(700,700); co

canvas畫小叮當

繪制 code 衣服 spa AD container margin quad fff <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

canvas畫弧線

false 順時針 inf star 旋轉 true com family 角度 arc(x, y, radius, startRad, endRad, [anticlockwise]) 在Canvas畫布上繪制以坐標點(x,y)為圓心、半麽為radius的圓上的一段弧線。

canvas畫波浪進度球

封裝 src 有效想象移動先來 aws 弧度 download 波浪進度球是一種非常常見的進度展示方式，常用於加載頁。首先來個例子再來個過程下面我們來學習一下如何畫一個波浪進度球首先我們分析一下進度球的組成部分有：一個圓，波紋，波紋的填充色，百分比文字我

小程序使用Canvas畫餅圖

tar lin canvas style nload raw 代碼程序 function 先上效果圖 -------------------------------------------------------------wxml代碼開始---------------

canvas畫鐘錶

運用canvas，js知識，畫鐘錶 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

canvas畫出菱形進度條

效果圖：程式碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas寫的菱形進度條</title>

使用canvas畫線，在Js中動態設定高和寬

1.定義div <div style="height:240px;" > &

測試canvas繪製旋轉文字的效能

　　canvas 繪製各種動畫效果時，我們經常會使用畫布旋轉，使繪製上去的元素有旋轉的效果。　　最近在專案中碰到了很嚴重的效能問題，經常排查發現是因為繪製批量文字時使用了畫布旋轉，且每行文字的旋轉角度是不一樣的，每次繪製前都會去動態的改變畫布上下文context的旋轉角度值，導致CPU佔用太多。　　而

canvas-畫旋轉的八卦

相關推薦