描述
HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。
不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
属性方法介绍:(颜色样式阴影)
1
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
默认为黑色
还有其他渐变的设置,不在意义列举。
2
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
改变ctx的fillRect方法,只进行边框的绘制
3
ctx.shadowColor="black";
ctx.shadowBlur=20;
ctx.shadowOffsetX=20;
给画的矩形设置阴影,模糊级数,偏移量
方法
1、var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0)
;渐变开始点x,渐变开始点y;渐变结束点x,渐变结束点y
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
2、
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100)
;
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
3、放射源
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100)
;
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
相关推荐
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 ...
Android—BitMap与Canvas学习笔记
炫酷的HTML5 canvas效果展示, 代码结构简单,有利于开发者参考使用。
NULL 博文链接:https://1017401036.iteye.com/blog/2314916
canvas的官网小例子,可以在给的api网址中查看到的例子。
NULL 博文链接:https://1017401036.iteye.com/blog/2407866
NULL 博文链接:https://128kj.iteye.com/blog/2085698
AndroidCanvasandroid canvas学习
NULL 博文链接:https://1017401036.iteye.com/blog/2309216
NULL 博文链接:https://128kj.iteye.com/blog/2085273
NULL 博文链接:https://128kj.iteye.com/blog/2083289
NULL 博文链接:https://128kj.iteye.com/blog/2084722
NULL 博文链接:https://128kj.iteye.com/blog/2088356
NULL 博文链接:https://1017401036.iteye.com/blog/2315301
NULL 博文链接:https://128kj.iteye.com/blog/2084146
NULL 博文链接:https://1017401036.iteye.com/blog/2407926
NULL 博文链接:https://128kj.iteye.com/blog/2088202
及其稀罕的PHP框架YII的中文文档,以及相关的PHP学习 资料,对Yii和PHP的函数做了详细的介绍