第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

canvas 不建議用css控制大小，直接寫width和height,是不帶有單位的

var WIDTH_W = 1024;

var WIDTH_H = 768;

var RADIUS = 8;

var MARGIN_T = 60;

var MARGIN_L = 30;

//var endTime = new Date();

//endTime.setTime(endTime.getTime() + 8 * (3600 * 1000))

var curShowTimeSeconds = 0;

var balls = [];

const colors = ['#33b5e5', '#0099cc', '#aa66cc', '#9933cc', '#99cc00', '#669900', '#ffbb33', '#ff8800', '#ff4444', '#cc0000']

window.onload = function() {

? ? WIDTH_W = document.body.clientWidth

? ? WIDTH_H = document.body.clientHeight

? ? MARGIN_L = Math.round(WIDTH_W / 10);

? ? MARGIN_T = Math.round(WIDTH_H / 5);

? ? RADIUS = Math.round(WIDTH_W * 4 / 5 / 108) - 1

? ? var canvas = document.getElementById("canvas");

? ? var context = canvas.getContext("2d");

? ? canvas.width = WIDTH_W;

? ? canvas.height = WIDTH_H;

? ? curShowTimeSeconds = getCurrentShowTimeSecond();

? ? setInterval(

? ? ? ? function() {

? ? ? ? ? ? render(context);

? ? ? ? ? ? update();

? ? ? ? }, 50

? ? )

}

function getCurrentShowTimeSecond() {

? ? var curTime = new Date();

? ? // var ret = endTime.getTime() - curTime.getTime();

? ? var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();

? ? // ret = Math.round(ret / 1000);

? ? // return ret >= 0 ? ret : 0;

? ? return ret

}

function update() {

? ? var nextShowTimeSeconds = getCurrentShowTimeSecond();

? ? var nh = parseInt(nextShowTimeSeconds / 3600);

? ? var nm = parseInt((nextShowTimeSeconds - nh * 3600) / 60);

? ? var ns = nextShowTimeSeconds % 60;

? ? var ch = parseInt(curShowTimeSeconds / 3600);

? ? var cm = parseInt((curShowTimeSeconds - ch * 3600) / 60);

? ? var cs = curShowTimeSeconds % 60;

? ? if (ns != cs) {

? ? ? ? if (parseInt(ch / 10) != parseInt(nh / 10)) {

? ? ? ? ? ? addBalls(MARGIN_L + 0, MARGIN_T, parseInt(ch / 10));

? ? ? ? }

? ? ? ? if (parseInt(ch % 10) != parseInt(nh % 10)) {

? ? ? ? ? ? addBalls(MARGIN_L + 15 * (RADIUS + 1), MARGIN_T, parseInt(ch / 10));

? ? ? ? }

? ? ? ? if (parseInt(cm / 10) != parseInt(nm / 10)) {

? ? ? ? ? ? addBalls(MARGIN_L + 39 * (RADIUS + 1), MARGIN_T, parseInt(cm / 10));

? ? ? ? }

? ? ? ? if (parseInt(cm % 10) != parseInt(nm % 10)) {

? ? ? ? ? ? addBalls(MARGIN_L + 54 * (RADIUS + 1), MARGIN_T, parseInt(cm % 10));

? ? ? ? }

? ? ? ? if (parseInt(cs / 10) != parseInt(ns / 10)) {

? ? ? ? ? ? addBalls(MARGIN_L + 78 * (RADIUS + 1), MARGIN_T, parseInt(cs / 10));

? ? ? ? }

? ? ? ? if (parseInt(cs % 10) != parseInt(ns % 10)) {

? ? ? ? ? ? addBalls(MARGIN_L + 93 * (RADIUS + 1), MARGIN_T, parseInt(cs % 10));

? ? ? ? }

? ? ? ? curShowTimeSeconds = nextShowTimeSeconds;

? ? }

? ? updateBalls();

? ? console.log(balls.length)

}

function updateBalls() {

? ? for (var i = 0; i < balls.length; i++) {

? ? ? ? balls[i].x += balls[i].vx;

? ? ? ? balls[i].y += balls[i].vy;

? ? ? ? balls[i].vy += balls[i].g;

? ? ? ? if (balls[i].y > WIDTH_H - RADIUS) {

? ? ? ? ? ? balls[i].y = WIDTH_H - RADIUS;

? ? ? ? ? ? balls[i].vy = -balls[i].vy * 0.75;

? ? ? ? }

? ? }

? ? var cnt = 0;

? ? for (var i = 0; i < balls.length; i++)

? ? ? ? if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WIDTH_W)

? ? ? ? ? ? balls[cnt++] = balls[i];

? ? while (balls.length > Math.min(300, cnt)) {

? ? ? ? balls.pop();

? ? }

}

function addBalls(x, y, num) {

? ? for (var i = 0; i < digit[num].length; i++) {

? ? ? ? for (var j = 0; j < digit[num][i].length; j++) {

? ? ? ? ? ? if (digit[num][i][j] == 1) {

? ? ? ? ? ? ? ? var aBall = {

? ? ? ? ? ? ? ? ? ? x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),

? ? ? ? ? ? ? ? ? ? y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),

? ? ? ? ? ? ? ? ? ? g: 1.5 + Math.random(),

? ? ? ? ? ? ? ? ? ? vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,

? ? ? ? ? ? ? ? ? ? vy: -5,

? ? ? ? ? ? ? ? ? ? color: colors[Math.floor(Math.random() * colors.length)]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? balls.push(aBall)

? ? ? ? ? ? }

? ? ? ? }

? ? }

}

function render(cxt) {

? ? cxt.clearRect(0, 0, WIDTH_W, WIDTH_H)

? ? var h = parseInt(curShowTimeSeconds / 3600);

? ? var m = parseInt((curShowTimeSeconds - h * 3600) / 60);

? ? var s = curShowTimeSeconds % 60;

? ? renderDigit(MARGIN_L, MARGIN_T, parseInt(h / 10), cxt)

? ? renderDigit(MARGIN_L + 15 * (RADIUS + 1), MARGIN_T, parseInt(h % 10), cxt)

? ? renderDigit(MARGIN_L + 30 * (RADIUS + 1), MARGIN_T, 10, cxt)

? ? renderDigit(MARGIN_L + 39 * (RADIUS + 1), MARGIN_T, parseInt(m / 10), cxt)

? ? renderDigit(MARGIN_L + 54 * (RADIUS + 1), MARGIN_T, parseInt(m % 10), cxt)

? ? renderDigit(MARGIN_L + 69 * (RADIUS + 1), MARGIN_T, 10, cxt)

? ? renderDigit(MARGIN_L + 78 * (RADIUS + 1), MARGIN_T, parseInt(s / 10), cxt)

? ? renderDigit(MARGIN_L + 93 * (RADIUS + 1), MARGIN_T, parseInt(s % 10), cxt)

? ? for (var i = 0; i < balls.length; i++) {

? ? ? ? cxt.fillStyle = balls[i].color;

? ? ? ? cxt.beginPath();

? ? ? ? cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI, true);

? ? ? ? cxt.closePath();

? ? ? ? cxt.fill();

? ? }

}

function renderDigit(x, y, num, cxt) {

? ? cxt.fillStyle = "rgb(0,102,153)";

? ? for (var i = 0; i < digit[num].length; i++) {

? ? ? ? for (var j = 0; j < digit[num][i].length; j++) {

? ? ? ? ? ? if (digit[num][i][j] == 1) {

? ? ? ? ? ? ? ? cxt.beginPath();

? ? ? ? ? ? ? ? cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);

? ? ? ? ? ? ? ? cxt.closePath();

? ? ? ? ? ? ? ? cxt.fill();

? ? ? ? ? ? }

? ? ? ? }

? ? }

}

制作動畫的架構(gòu)：

setInterval{

????function(){//每幀要做什么事情

????????render();//繪制當前的畫面

????????update();//調(diào)整繪制畫面需要的數(shù)據(jù)結(jié)構(gòu)

????],

????50//每隔多少時間執(zhí)行幀動畫函數(shù)

};

context.arc(圓心坐標x，圓心坐標y，半徑，開始的弧度值，結(jié)束的弧度值，anticlockwise=false畫弧線的方向，默認逆時針)//只設(shè)定狀態(tài)，要畫出來還是需要stroke()函數(shù)

弧度的設(shè)定是數(shù)字*Math.PI

context.closePath()會自動把不封閉的路徑 用線段首尾相連，去掉只依靠beginPath（）同樣可以起到重置設(shè)定的效果

closepath這個函數(shù)對fill函數(shù)沒有用，去掉之后依然填充

畫一條直線：

context.moveTo(100,100)//直線的起點

context.lineTo(700,700)//直線的終點

context.lineTo(100,700)//多筆畫時設(shè)置多終點即可

context.lineTo(100,100)//最后的筆畫終點和開始的起點同坐標能連成一個完整形狀（每一筆都是以上一個終點為起點的）

context.lineWidth = 5 //設(shè)置線條的寬度

context.strokeStyle =#005588 “”//設(shè)置線條的樣式（顏色）

context.fillStyle="rgb(2,100,30)"http://給畫出來的多邊形著色

context.stroke()//繪制直線

context.fill()//給多邊形上色

/*先設(shè)置繪圖的狀態(tài)，再調(diào)用函數(shù)進行具體繪制*/

畫布系統(tǒng)中坐標系設(shè)定：以左上角為原點，向右為x正軸，向下為y正軸

畫多線段時：

后面的狀態(tài)設(shè)定會覆蓋前面的，因此需要使用代碼：context.beginPath()和context.closePath()將當前需要使用的狀態(tài)限定起來，從而避免后面的狀態(tài)覆蓋前面

canvas：定義在瀏覽器上的畫布

1、創(chuàng)建canvas

<canvas></canvas>

2、JavaScript

var canvas=document。getElementById（‘canvas’）

var context=canvas.getContext('2d')//繪圖的上下文環(huán)境

//使用contexnt進行繪制

canvas.width和canvas.height也可以設(shè)置畫布的大小

通過格子方法畫出一個字

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>canvas</title>
</head>
<body>
????<canvas?id="canvas"?width="1024"?height="768"?>
????????當前瀏覽器不支持canvas
????</canvas>
????<script?type="text/javascript">
????????var?canvas?=?document.getElementById("canvas");
????????canvas.width=1024;
????????canvas.height=768;
????????if(canvas.getContext("2d")){
????????????var?context?=?canvas.getContext("2d");

????????????
????????????context.lineWidth=5;
????????????context.strokeStyle="#005588";

????????????for(var?i=0;i<10;i++){
????????????????context.beginPath();
????????????????context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
????????????????/*圓心x,圓心y,半徑,起點,結(jié)點,默認順時針*/
????????????????context.closePath();/*如果當前路徑未封閉，會自動讓當前路徑封閉*/
????????????????context.stroke();

????????????}
????????????
????????????for(var?i=0;i<10;i++){
????????????????context.beginPath();
????????????????context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
????????????????context.stroke();

????????????}

????????????for(var?i=0;i<10;i++){
????????????????context.beginPath();
????????????????context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);
????????????????/*圓心x,圓心y,半徑,起點,結(jié)點,true逆時針*/
????????????????context.closePath();
????????????????context.stroke();

????????????}

????????????for(var?i=0;i<10;i++){
????????????????context.beginPath();
????????????????context.arc(50+i*100,420,40,0,2*Math.PI*(i+1)/10,true);
????????????????context.stroke();

????????????}

????????????context.fillStyle="#005588";
????????????for(var?i=0;i<10;i++){
????????????????context.beginPath();
????????????????context.arc(50+i*100,540,40,0,2*Math.PI*(i+1)/10,true);
????????????????context.closePath();
????????????????context.fill();

????????????}

????????????for(var?i=0;i<10;i++){
????????????????context.beginPath();
????????????????context.arc(50+i*100,660,40,0,2*Math.PI*(i+1)/10,true);

????????????????context.fill();

????????????}



????????}else{
????????????alert("當前瀏覽器不支持canvas");
????????}
????????
????</script>
</body>
</html>

繪制弧線context.arc

canvas默認大小是width：300px; height:150px;

繪畫盒子計算方式！

html

<canvas id="canvas"></canvas>

js

var canvas = document.getElementById('canvas')得到canvas

var context = canvas.getContext('2d')獲取上下文繪圖環(huán)境

context

context.moveTo(x,y)

context.lineTo(x,y)設(shè)置路徑

context.arc(cx,cy,r,sAng,eAng,true/false)繪制圓形或弧

context.beginPath()

context.closePath()表示一個狀態(tài)/結(jié)束路徑

context.lineWidth路徑粗細

context.strokeStyle路徑顏色

context.fillStyle填充色塊顏色

context.stroke() 繪制路徑

context.fill() 繪制填充色塊

context.clearRect(x,y,width,height)對一個指定的矩形區(qū)域內(nèi)的圖像進行刷新

context.canvas 獲取對應(yīng)的上下文繪圖環(huán)境

convas.width設(shè)置畫布的寬

convas.height設(shè)置畫布的高

canvas.getContext('2d')得到繪圖環(huán)境

基本的動畫制作方法Animation

draw.

繪制直線

context.moveTo(100,100) //下筆位置

context.lineTo(700,700); //結(jié)束位置（可以有多個，滿足多次繪制的需求）

context.lineWidth = 5; //線條寬度

context.strokeStyle = '#058';//筆觸樣式

context.stroke(); //正式繪圖

//多邊形的著色方法

context.fillStyle = 'rgb(2,100,30)'; //填充樣式

context.fill(); //正式填充

canvas的繪制基于狀態(tài)

之前繪制的線條如果還有用，會以現(xiàn)在的狀態(tài)來在繪制現(xiàn)在線條的同時，將之前的線條重新繪制一遍。狀態(tài)指它的一些屬性，如lineWidth,storkeStyle。

劃分繪制過程

使用beginPath()和closePath() 表明一個繪制過程的開始和結(jié)束。那樣各個過程之間就不會因為canvas基于狀態(tài)繪制的特點，造成樣式一致變成最后的狀態(tài)。

Cavas是基于狀態(tài)的，save方法就是存儲的當前的狀態(tài)，繪制的過程不會存儲。