html5绘制小鱼,canvas.html

Canvas Demo

function drawDiagonal () {

var diagonal = document.querySelector("#diagonal");

var ctx = diagonal.getContext("2d");

var desktop = new Image();

desktop.src = "assets/images/desktop.png";

ctx.save();

ctx.translate(480, 180);

ctx.scale(1, 1);

ctx.drawImage(desktop, 0, 0);

ctx.rotate(45 * Math.PI / 180);

ctx.drawImage(desktop, 0, 0);

ctx.rotate(45 * Math.PI / 180);

ctx.drawImage(desktop, 0, 0);

ctx.rotate(45 * Math.PI / 180);

ctx.drawImage(desktop, 0, 0);

ctx.rotate(45 * Math.PI / 180);

ctx.drawImage(desktop, 0, 0);

ctx.rotate(45 * Math.PI / 180);

ctx.drawImage(desktop, 0, 0);

ctx.rotate(45 * Math.PI / 180);

ctx.drawImage(desktop, 0, 0);

ctx.rotate(45 * Math.PI / 180);

ctx.drawImage(desktop, 0, 0);

ctx.restore();

ctx.save();

ctx.lineWidth = 2;

ctx.strokeStyle = "orange";

ctx.beginPath();

ctx.moveTo(100, 100);

ctx.lineTo(500, 500);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(150, 100);

ctx.lineTo(550, 500);

ctx.stroke();

ctx.restore();

ctx.save();

ctx.beginPath();

// ctx.translate(300, 200);

ctx.moveTo(10, 500);

ctx.quadraticCurveTo(0, 0, 500, 10);

// ctx.quadraticCurveTo(310, -250, 410, -250);

ctx.lineWidth = 20;

var textureImg = new Image();

textureImg.src = "assets/images/texture.png"

ctx.strokeStyle = ctx.createPattern(textureImg, "repeat");

ctx.stroke();

ctx.restore();

ctx.beginPath();

ctx.save();

ctx.translate(100, 400);

ctx.scale(1, 2);

// var colorGradinet = ctx.createLinearGradient(0, 0, 400, 0);

var colorGradinet = ctx.createRadialGradient(0, 25, 100, 400, 25, 100);

colorGradinet.addColorStop(0,"red");

colorGradinet.addColorStop(0.5,"green");

colorGradinet.addColorStop(1,"blue");

ctx.fillStyle = colorGradinet;

ctx.fillRect(0, 0, 400, 50);

ctx.lineWidth = 2;

ctx.strokeStyle = 'yellow';

ctx.strokeRect(0, 0, 400, 50);

ctx.restore();

}

window.onload = drawDiagonal;

function drawTree () {

var tree = document.querySelector("#tree");

var ctx = tree.getContext("2d");

ctx.save();

ctx.lineWidth = "2";

ctx.strokeStyle = "blue";

ctx.translate(10, 10);

ctx.strokeRect(0, 0, 100, 100);

ctx.fillText("Hello Canvas", 10, 10);

ctx.restore();

ctx.save();

ctx.lineWidth = "5";

ctx.strokeStyle = "orange";

ctx.translate(10, 10);

ctx.moveTo(0, 0);

ctx.lineTo(100, 100);

ctx.stroke();

ctx.restore();

ctx.save();

ctx.translate(200, 200);

ctx.fillStyle = "#663300";

ctx.fillRect(0, 0, 100, 100);

ctx.restore();

}

function clickCanvas (event) {

console.log(window.JSON.stringify(event));

}

绘制树

一键复制

编辑

Web IDE

原始数据

按行查看

历史