html5（二）canvas绘图渐变

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

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

=========================

<canvas id="draw" width="300" height="300">在这里的代码是看不见的，不支持canvas的浏览器中可以看到这里的代码，这是作兼容的方法</canvas>----------canvas设置宽高必须在元素内部。

canvas 默认大小是300*150，如果是在style中设置宽高，会相对于默认大小的倍数进行放大；

var oc=document.getElementById('draw');
var ctx=oc.getContext('2d');／／获取绘制的上下问，2d表示2d图形，webgl表示3D；
ctx.fillStyle='red';／／设置填充颜色

ctx.strokeStyle='red';／／空心边框的颜色
ctx.arc(100,100,100,0,360*Math.PI/180);／／绘制弧形或圆形
//ctx.fill();／／填充渲染，
ctx.stroke(); // 空心渲染
ctx.closePath(); ／／闭合路径
ctx.fillStyle='green';
ctx.beginPath(); ／／开始路径
ctx.arc(100,100,100,-90*Math.PI/180,-30*Math.PI/180);
ctx.fill();

=================绘制矩形==========边框问题

ctx.fillRect(0,0,100,100);--------填充

ctx.strokeRect(100,100,100,100);--------边框默认颜色是黑色，线宽1px；当边框的像素是奇数时，会出现像素被分配的现象，边缘颜色变浅，一般解决方法：吧像素设置成偶数，或者改成小数，ctx.strokeRect(100.5,100.5,100,100);

ctx.lineWidth=10;----------设置线宽

=============绘图路径======

ctx.beginPath();//开始路径
ctx.moveTo(10,10);//第一次设置的起点
ctx.lineTo(500,500);//下一个点
ctx.lineTo(300,100);
ctx.stroke();
ctx.closePath();-----------有两个作用：一是关闭刚才开始的路径，二是闭合路径。

beginPath(),closePath()不对属性线宽，颜色等起作用；

ctx.save();-----------保存上次的属性状态；

ctx.restore();------------取出上次的属性状态；

ctx.clearRect(0,0,100,100);----------清除指定矩形区域的大小；
ctx.clearRect(0,0,oc.width,oc.height);---------------清除整个画布的大小；

=========简易画笔=======待完善-========

===========连接处样式和线头样式=======

ctx.lineWidth=20;
ctx.lineJoin='bevel';//连接处样式，bevel是斜切，round是圆角
ctx.lineCap='round';//设置线头样式的时候不能用closePath（），round圆角，square方块
ctx.strokeRect(10,10,200,200);

============绘制曲线和圆形========

ctx.arc(100,100,100,-90*Math.PI/180,-30*Math.PI/180，false);//如绘制的不是360度，绘制出来的是扇形的一部分，如果用的是fill（）会自动吧起点和终点连接，false代表是顺时针，true代表是逆时针；如果想要绘制出来的是标准的扇形，要加上起始点moveTo( 圆心)；
ctx.fill();

曲线的绘制==========

ctx.moveTo(100,100);
ctx.arcTo(10,20,150,100,50);//参数两个点加一个半径
ctx.quadraticCurveTo(100,100,200,100);//前一个是控制点坐标，后一个是结束点的坐标
ctx.bezierCurveTo(10,20,30,40,50,60);／／三个点一次是第一个控制点，第二个控制点，终点

=================变换=================

ctx.translate(100,100);//位移，往上和往左偏移是负数；
ctx.rotate(45*Math.PI/180);//旋转45度，默认以图形自身左上角为定点
ctx.scale(0.5,0.5)//缩放
ctx.fillRect(10,10,100,200);

============设置图片和背景===================

var img=new Image();
img.src='';
img.onload=function(){／／img加载完成的时候执行绘图
ctx.drawImage(img,50,60);//3个参数，50是距离cavas左边的距离，60是距离canvas上面的距离
ctx.drawImage(img,50,60，10，20);／／5个参数，50，60 同上，10和20 是图片绘制到canvas中显示的大小
ctx.drawImage(img,，，，，50,60，10，20);／／9个参数，逗号的四个参数是图片本身的坐标和宽高，后面四个参数同上面的最后四个参数

var bg=ctx.createPattern(img,'repeat');//repeat--平铺，no-repeat不平铺，repeat-x是x轴平铺
ctx.fillStyle=bg;//用背景填充
ctx.fillRect(100,100,300,300);

==========canvas中的渐变===============

线性渐变--------

var lg=ctx.createLinearGradient(100，200，300，400);//线性渐变，100和200是起点坐标，300和400是终点坐标
lg.addColorStop(0,'blue');//0和0.5和1是代表颜色的位置
lg.addColorStop(0.5,'green');
lg.addColorStop(1,'yellow');
ctx.fillStyle=lg;
ctx.fillRect(10,10,100,100);

放射性渐变-----------

var rg=ctx.createRadialGradient(100，200，50，300，400 ，100);//放射性渐变100和200是第一个圆形，50是半径，300和400是第二个圆形，100是半径；
lg.addColorStop(0,'blue');//0和0.5和1是代表颜色的位置
lg.addColorStop(0.5,'green');
lg.addColorStop(1,'yellow');
ctx.fillStyle=lg;
ctx.fillRect(10,10,100,100);

阴影-------------

ctx.shadowOffsetX=10;//x轴方向偏移
ctx.shadowOffsetY=10;//y轴方向偏移
ctx.shadowColor='red';//阴影颜色
ctx.shadowBlur=5;//模糊值
ctx.fillRect(0,0,10,100);

=============

秒客网

html5（二）canvas绘图渐变

什么是 Canvas？

相关文章