html canvas入门4,HTML5 – 4.canvas

1.绘制矩形

2.绘制圆形javascript

3.绘制文字html

4.保存文件java

什么是 Canvas?

HTML5 元素用于图形的绘制，经过脚本 (一般是JavaScript)来完成.canvas

标签只是图形容器，您必须使用脚原本绘制图形。字体

你能够经过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。spa

varc = document.getElementById("myCanvas");varctx = c.getContext("2d");

ctx.fillStyle ="#FF0000";

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

实例解析:3d

首先，找到 元素:rest

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

而后，建立 context 对象：code

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

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。orm

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000";

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

设置fillStyle属性能够是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000(黑色)。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

//1.获取canvas元素

varc=document.getElementById("myCanvas");//2.定义一个上下文context

varctx=c.getContext("2d");//3.填充与绘制边框

ctx.fillStyle= "green";//4.绘制样式

ctx.strokeStyle= "#fff";//5.设置颜色值

ctx.lineWidth= "5";//6.设置画笔宽度

ctx.fillRect(0,0,400,300);//7.绘制矩形

ctx.strokeRect(50,50,120,120);

ctx.strokeRect(110,110,180,120);//绘制第2个矩形