html5（二）canvas绘图渐变

时间2024-01-26 20:19:02发布访客分类HTML浏览951

导读：收集整理的这篇文章主要介绍了html5教程-html5（二）canvas绘图渐变，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。什么是 Canva...

收集整理的这篇文章主要介绍了html5教程-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 height="300" id="draw" width="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); ---------------清除整个画布的大小；

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

 var oc = document.getElementById('draw');
     var ctx = oc.getContext('2d');
  oc.onmousedown = function(ev) {
         ctx.fillStyle = 'red';
         var x = ev.pageX - oc.offsetLeft;
     //ev.pageX是鼠标到body页面的距离，oc.offsetLeft是画布距离body的距离；     var y = ev.pageY - oc.offsetTop;
         ctx.moveTo(x, y);
     oc.onmouSEMove = function(ev) {
             var x = ev.pageX - oc.offsetLeft;
             var y = ev.pageY - oc.offsetTop;
             ctx.lineTo(x, y);
             ctx.stroke();
     }
    ;
     oc.onmouseup = function() {
             oc.onmousemove = null;
             oc.onmouseup = null;
     }
     return false  }
    ;

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

 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);

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