Vải 3d javascript

  YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS

  YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS

• Kiến trúc, nhà mẫu
• Game 2D, 3D
• Phần mềm hỗ trợ 3D trực tuyến 1 cách trực tiếp quan sinh động

Trình duyệt web thông báo hiện đã hỗ trợ tốt cho

  YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS

bản trình diễn mã

mục lục. htm

  
    Demo Canvas 2D trong HTML5

    
      function load[_id] {
        var canvas = document.getElementById[_id];
        var context = canvas.getContext["2d"];

        context.fillStyle = "#ffeeff";
        context.fillRect[0, 0, canvas.offsetWidth, canvas.offsetHeight];

        context.fillStyle = "#ff8800";
        context.font = "20px Arial";
        context.fillText["PRESS DRAW BUTTON", 180, 220];
      }

      function draw[_id] {
        var canvas = document.getElementById[_id];
        var context = canvas.getContext["2d"];

        context.fillStyle = "#ffeeff";
        context.fillRect[0, 0, canvas.offsetWidth, canvas.offsetHeight];

        var pos1 = Math.floor[Math.random[] * 100 + 1];
        var pos2 = Math.floor[Math.random[] * 100 + 1];
        var pos3 = Math.floor[Math.random[] * 100 + 1];
        var pos4 = Math.floor[Math.random[] * 100 + 1];

        // FILL RECTANGLE
        context.fillStyle = "#ff8800";
        context.fillRect[0 + pos1, 0 + pos4, 150, 75];

        // DRAW RECTANGLE
        context.strokeStyle = "#000000";
        context.strokeRect[50 + pos2, 50 + pos3, 120, 75];

        // DRAW A LINE
        context.strokeStyle = "#00aadd";
        context.moveTo[100 + pos3, 200 + pos2];
        context.lineTo[250 + pos3, 250 + pos2];
        context.stroke[];

        // DRAW CIRCLE
        context.beginPath[];
        context.arc[250 + pos4, 50, 40, 0, 2 * Math.PI];
        context.stroke[];

        // FILL CIRCLE
        context.fillStyle = "#ffbb33";
        context.beginPath[];
        context.arc[300 + pos1, 300 + pos4, 30, 0, 2 * Math.PI];
        context.fill[];

        // DRAW TEXT
        context.strokeStyle = "#ffbb33";
        context.font = "30px Arial";
        context.strokeText["www.stdio.vn", 10 + pos2, 300 + pos3];

        // FILL TEXT
        context.fillStyle = "#aa0000";
        context.font = "25px Arial";
        context.fillText["STDIO.VN", 300 + pos3, 250 + pos2];

        // DRAW IMAGE
        var image = new Image[];
        image.src = "sins.png";
        image.onload = function [] {
          context.drawImage[image, 200 + pos2, 100 + pos3];
        };
      }
    
  
  
    

      
        YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS
      
      

        
          DRAW
        
        
          RELOAD
        
      
    
  

tội lỗi. png

Phân tích và giải thích mã

Lưu

  YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS

  YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS

  YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS

Tạo thẻ

  YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS

  YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS

Các phép vẽ từ JavaScript sẽ được vẽ lên canvas, đặt id là

  YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS

  YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS

Xem xét chức năng vẽ draw[_id]

Trong hàm này có 2 phần chính, phần thứ nhất là lấy đối tượng vẽ

  YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS

•   YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS
  

  9 là đối tượng chứa toàn bộ các phương thức hỗ trợ vẽ. vẽ đoạn thẳng, vẽ đường tròn,

Tạo "bối cảnh"

var canvas = document.getElementById[_id];
var context = canvas.getContext["2d"];

Các phương thức vẽ cơ bản

// FILL RECTANGLE
context.fillStyle = "#ff8800";
context.fillRect[0 + pos1, 0 + pos4, 150, 75];

// DRAW RECTANGLE
context.strokeStyle = "#000000";
context.strokeRect[50 + pos2, 50 + pos3, 120, 75];

// DRAW A LINE
context.strokeStyle = "#00aadd";
context.moveTo[100 + pos3, 200 + pos2];
context.lineTo[250 + pos3, 250 + pos2];
context.stroke[];

// DRAW CIRCLE
context.beginPath[];
context.arc[250 + pos4, 50, 40, 0, 2*Math.PI];
context.stroke[];

// FILL CIRCLE
context.fillStyle = "#ffbb33";
context.beginPath[];
context.arc[300 + pos1, 300 + pos4, 30, 0, 2*Math.PI];
context.fill[];

// DRAW TEXT
context.strokeStyle = "#ffbb33";
context.font = "30px Arial";
context.strokeText["www.stdio.vn", 10 + pos2, 300 + pos3];

// FILL TEXT
context.fillStyle = "#aa0000";
context.font = "25px Arial";
context.fillText["Kevin La", 300 + pos3, 250 + pos2];

// DRAW IMAGE
var image = new Image[];
image.src = "sins.png";
image.onload = function[]
{
  context.drawImage[image, 200 + pos2, 100 + pos3];
}

Các phương thức vẽ có trong demo

• Vẽ ảnh chữ nhật // FILL RECTANGLE
• Đường viền xung quanh ảnh chữ nhật // DRAW RECTANGLE
• Vẽ một đoạn thẳng // DRAW A LINE
• Vẽ một đường tròn // DRAW CIRCLE
• Vẽ một hình tròn // FILL CIRCLE
• Vẽ đường viền cũng quanh chữ // DRAW TEXT
• Vẽ chữ // ĐIỀN VĂN BẢN
• Vẽ một ảnh // VẼ HÌNH ẢNH

Stroke và fill

Vẽ các ảnh này ta cần phân biệt 2 khái niệm cơ bản

• nét vẽ - vẽ đường viền xung quanh ảnh học đó
• fill - draw and tô phần "ruột" của ảnh học đó

var canvas = document.getElementById[_id];
var context = canvas.getContext["2d"];

var canvas = document.getElementById[_id];
var context = canvas.getContext["2d"];

Vẽ một ảnh - Draw Image

Để vẽ một ảnh, hãy tải ảnh đầu tiên và tải ảnh vào bộ nhớ

var image = new Image[];
image.src = "sins.png";

Tạo 1 đối tượng Hình ảnh, sau đó chỉ định đường dẫn đến ảnh mà ta cần tải và tải. Sau bước này, ta có thể gọi hàm vẽ ngay

context.drawImage[image, 200 + pos2, 100 + pos3];

3 lines code after to load and drawing image

var image = new Image[];
image.src = "sins.png";
context.drawImage[image, 200 + pos2, 100 + pos3];

var canvas = document.getElementById[_id];
var context = canvas.getContext["2d"];

var canvas = document.getElementById[_id];
var context = canvas.getContext["2d"];

var canvas = document.getElementById[_id];
var context = canvas.getContext["2d"];