Canvas基础

Posted 2020-06-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Canvas基础相关的知识，希望对你有一定的参考价值。

Canvas基础

大道至简

html

index.html

<!DOCTYPE HTML>  
<html style="height:100%">  
<head>
<title>canvas基础</title>
<meta charset="utf-8"/>
<script src="canvas_demo.js"></script>
</head>
<body style="height:100%">
<canvas id="canvas">
请升级浏览器
</canvas>
</body>
</html>

js

canvas_demo.js

var canvas=document.getElementById("canvas");   
var context=canvas.getContext("2d");
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;

context.beginPath()
context.moveTo(0,0);
context.lineTo(500,500);
context.lineWidth=5;
context.closePath()

context.strokeStyle="red";
context.stroke();

context.beginPath()
context.arc(500,200,150,0,2*Math.PI,true);
context.closePath()

context.strokeStyle="blue";
context.stroke();

context.beginPath()
context.moveTo(800,200)
context.lineTo(1200,100)
context.lineTo(1400,500)
context.closePath()

context.fill()

context.fillRect(1400,300,100,100)


context.beginPath()
context.moveTo(1400,100)
context.lineTo(1600,400)
context.closePath()

var gnt1=context.createLinearGradient(1400,100,1600,400)
gnt1.addColorStop(0,‘red‘)
gnt1.addColorStop(1,‘yellow‘)
context.strokeStyle=gnt1
context.stroke()

var gnt2=context.createLinearGradient(100,0,300,0)
gnt2.addColorStop(0,‘green‘)
gnt2.addColorStop(0.5,‘red‘)
gnt2.addColorStop(1,‘yellow‘)
context.fillStyle=gnt2
context.fillRect(100,600,200,100)

context.beginPath()
context.arc(600,800,100,0,1.5*Math.PI,true)
context.closePath()

context.stroke()


var gtn=context.createRadialGradient(1200,600,50,1200,700,200)
gtn.addColorStop(1,"blue")
gtn.addColorStop(0,"red")
context.fillStyle=gtn
context.fillRect(1000,500,400,400)

demo

动态时间

以上是关于Canvas基础的主要内容，如果未能解决你的问题，请参考以下文章

canvas绘画基础：认识canvas画布