masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Kanvas segi empat tepat yang jelas

Kosongkan konteks kawasan segi empat tepat.clearRect(x,y,width,height)

lebar: clear rectangular length

height: clear rectangle height

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>huatu</title>
    <style>
        body{
            background: #dddddd;
        }
        #canvas{
            margin: 10px;
            background: #ffffff;
            border: thin inset #aaaaaa;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400">
        Canvas not Supported
    </canvas>
    <script>
        var canvas=document.getElementById('canvas'),
            context=canvas.getContext('2d');
        context.lineJoin='round';
        context.lineWidth=30;
        context.font='24px Helvetica';
        context.fillText('Click anywhere to erase',175,40);
        context.strokeRect(75,100,200,200);
        context.fillRect(325,100,200,200);
        context.canvas.onmousedown = function(e) {
            context.clearRect(0,0,600,400);
        }
    </script>
</body>
</html>

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>huatu</title> <style> body{ background: #dddddd; } #canvas{ margin: 10px; background: #ffffff; border: thin inset #aaaaaa; } </style> </head> <body> <canvas id="canvas" width="600" height="400"> Canvas not Supported </canvas> <script> var canvas=document.getElementById('canvas'), context=canvas.getContext('2d'); context.lineJoin='round'; context.lineWidth=30; context.font='24px Helvetica'; context.fillText('Click anywhere to erase',175,40); context.strokeRect(75,100,200,200); context.fillRect(325,100,200,200); context.canvas.onmousedown = function(e) { context.clearRect(0,0,600,400); } </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492832 permainan