html css画小车,canvas.html

canvas基础

您的浏览器不支持 HTML5 canvas 标签。

您的浏览器不支持 HTML5 canvas 标签。

您的浏览器不支持 HTML5 canvas 标签。

style="fill: lime;stroke: purple;stroke-width: 5;fill-rule: evenodd;">

var c=document.getElementById('myCanvas');

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

//绘制矩形

ctx.fillStyle="#0055FF";

ctx.fillRect(0,0,0150,75);

//画一条线

ctx.moveTo(0,0);

ctx.lineTo(200,200);

ctx.stroke();

//画一个圆

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

//加入字

ctx.font="30px Arial";

ctx.fillText("HEllo world",10,50);

ctx.strokeText("你好",0,90);

//渐变

var c2=document.getElementById("myCanvas2");

var ctx2=c2.getContext("2d");

var grd=ctx2.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

ctx2.fillStyle=grd;

ctx2.fillRect(10,10,150,80);

一键复制

编辑

Web IDE

原始数据

按行查看

历史