码迷,mamicode.com
首页 > 其他好文 > 详细

canvas

时间:2016-09-09 11:54:07      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

首先应该写有一个画布,定义你的画布大小,所做的内容将在这块画布上

<canvas id="cvs" width="800" height="600">你的浏览器不支持canvas</canvas> 

用于在画布上绘制文本、线条、矩形、圆形等
var c=document.getElementById("myCanvas");

getContext() 方法提供了用于在画布上绘图的方法和属性
 

 1.绘制一个蓝色的矩形

技术分享

var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);

 

2.定义一个从黑到白的渐变

技术分享

 

 

 

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

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

 

canvas

标签:

原文地址:http://www.cnblogs.com/luoruyan/p/5855815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!