【筆記】【imooc】canvas(きらびやかな時計効果)

7802 ワード

メモ Javascript

＊課程最終成果展示:CodePen:https://codepen.io/YitingLi/full/jwjgdP/ GitHub:https://github.com/Liyiting/canvas-Gorgeous-clock-effects＊
ジグソーパズル
HTML
httml 5の新しいラベルです.長い幅を指定しない場合、デフォルトは300 px*150 pxです.ここの広さは単位がないです.キャンバスの中の精度も決めました.
Javascript

var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
//  context

キャンバス

canvas.width

canvas.height

canvas.getConttext(‘2 d’)

Draw a lineで直線を描きます.
Canvasは状態に基づいた描画です.

context.moveTo(100, 100)//   

context.lineTo(700, 700)//    

context.lineWidth = 5 //    

//  
context.strokeStyle = "#005588" //    

context.stroke() // !

//  
context.fillStyle = "rgb(2,100,30)"//    

context.fill()

//      
//closePath         ，                。                    ，         。（         ）  ，                  ，      ，      beginPath，   ，closePath beginPath         。
context.beginPath()

context.closePath()

ジグソーデモ:


<html>
<head>
    <meta charset = "UTF-8">
    <title>title>
head>
<body>
    <canvas id="canvas" style="border: 1px solid #aaa;display: block; margin: 0 auto;">
                Canvas,          。
    canvas>
    <script>
    var tangram = [
        {p:[{x:0, y:0},{x:800, y:0},{x:400, y:400}], color: "#caff67"},
        {p:[{x:0, y:0},{x:400, y:400},{x:0, y:800}], color: "#67becf"},
        {p:[{x:800, y:0},{x:800, y:400},{x:600, y:600},{x:600, y:200}], color: "#ef3d61"},
        {p:[{x:600, y:200},{x:600, y:600},{x:400, y:400}], color: "#f9f51a"},
        {p:[{x:400, y:400},{x:600, y:600},{x:400, y:800},{x:200, y:600}], color: "#a594c0"},
        {p:[{x:200, y:600},{x:400, y:800},{x:0, y:800}], color: "#fa8ecc"},
        {p:[{x:800, y:400},{x:800, y:800},{x:400, y:800}], color: "#f6ca29"}
    ]

        window.onload = function() {
            var canvas = document.getElementById("canvas");

            canvas.width = 800;
            canvas.height = 800;

            var context = canvas.getContext("2d")
            for(var i = 0; i < tangram.length; i++){
                draw(tangram[i], context);
            }
        }

        function draw(piece, cxt){
            cxt.beginPath();
            cxt.moveTo(piece.p[0].x, piece.p[0].y);
            for(var i = 1; i"black";
            cxt.lineWidth = 3;
            cxt.stroke();
        }
    script>
body>
html>

Draw an arcで弧を描く

context.arc(
    centerx, centery, radius, //       
    startingAngle, endingAngle, //     
    anticlockwise = false // /   
    //       0pi   ，        
)

closePathはfillにとっては役に立たないです.fillを呼び出すとcanvasは自動的にclosePathのないパスの先頭を接続します.

clearRct(x,y,width, height)//

androidとh 5の相互調整ステップ