Html5 canvas学习1-描边渐变直线矩形

最新推荐文章于 2023-10-19 15:32:38 发布

25King

最新推荐文章于 2023-10-19 15:32:38 发布

阅读量1.1k

点赞数

分类专栏： web前端文章标签： html5 canvas

本文链接：https://blog.csdn.net/u012426959/article/details/78835857

版权

web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1.坐标系统

默认是300*150像素大小，以左上角为原点。canvas 的左上角坐标为 (0,0)
可以通过下面方式来交换坐标:
平移（translate）旋转（rotate）缩放（scale）

2.创建

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
</script>

.getContext() 是canvas的绘图对象/方法，要让canvas执行绘图工作必须先获取canvas的.getContext()对象来执行。
.getContext()只接受一个参数，该参数用于获取canvas的绘图环境，例如.getContext(“2d”)表示该canvas的绘图环境为2D平面（可以绘制文本、直线、弧线、矩形、圆形等）。当前H5只支持2D环境，在不久的将来会开放3D绘图功能。

3.画线

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC; margin:30px;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(0,0);   //咱把“画笔”移到坐标(0,0)
ctx.lineTo(150,50);  //从上个点(0,0)画一条直线，结束点坐标是(150,50)
ctx.lineTo(20,100);  //从上个点(150,50)继续画一条直线，结束点坐标是(20,100)
ctx.moveTo(90,90);   //咱把“画笔”移到坐标(90,90)
ctx.lineTo(80,150);  //从上个点(60,60)继续画一条直线，结束点坐标是(80,150)
ctx.strokeStyle = "red";    //设定描边颜色为红色，只要写在.stroke()方法前面即可
ctx.stroke();  //描边
</script>

结果如下：
这里写图片描述
两段分别上色：

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d"); 
  ctx.moveTo(0,0);   
  ctx.lineTo(150,50);  
  ctx.lineTo(20,100); 
  ctx.strokeStyle = "blue";    //设定描边颜色为蓝色
  ctx.stroke();  

  ctx.beginPath();  //告诉canvas咱们要重新绘制一条全新的路径了，之前画的东西从此再无关系
  ctx.moveTo(90,90); 
  ctx.lineTo(80,150);  
  ctx.strokeStyle = "red";    //设定描边颜色为红色
  ctx.stroke();  
</script>

.stroke() 描边方法，不给运动路径加stroke特效的画是不存在描边效果的，canvas也一样，想要运动路径轨迹能有视觉效果，需要使用相应的上色/描边方法
ctx.strokeStyle来设定描边的颜色

ctx.strokeStyle**可获值的形式有三种：

ctx.strokeStyle=color|gradient|pattern; //即支持 “颜色/渐变/图案笔刷” 的赋值

颜色color

color赋值方式，和我们常规的css赋值是一样的，支持css3颜色值标准

ctx.strokeStyle = "orange";
ctx.strokeStyle = "#FFA500";    //#rrggbb形式

渐变gradient

渐变有LinearGradient线性渐变，另有放射状/圆形渐变RadialGradient(画矩形当中补充了该内容)

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
ctx.moveTo(0,0);   
ctx.lineTo(150,50); 
ctx.lineTo(20,100); 

var grd = ctx.createLinearGradient(0,0,170,0);  //定义线性渐变对象，设定渐变线起始点和结束点坐标，坐标格式为(起始点x,起始点y,结束点x,结束点y)
grd.addColorStop(0,"black");   //定义渐变线起点颜色
grd.addColorStop(0.5,"red");   //定义渐变线中间点的颜色
grd.addColorStop(1,"yellow");  //定义渐变线结束点的颜色

ctx.strokeStyle = grd;   //将渐变对象赋值给strokeStyle
ctx.stroke();  //描边

这里写图片描述

图案描边pattern

strokeStyle之所以不叫strokeColor是因为它除了支持颜色描边还支持图案描边。
线性渐变描边需要先createLinerGradient(xstart,ystart,xend,yend)，那么设置图案描边自然也要先新建一个canvasPattern对象：
createPattern(image, repetitionStyle)
其中参数 image 代表图案对象，一般通过 document.createElement(‘img’) 或者 new Image() ，再定义其src值来创建该对象。
而repetitionStyle参数很好理解，即图案重复形式，其可选值有”repeat” 、”repeat-x”、”repeat-y” 和”no-repeat” （和css的background-repeat可选值一样，不赘述）。

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC; margin:30px;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d"); 

    pic = new Image();   //创建图片对象，或者 pic = document.createElement('img')
    pic.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg"; 
    pic.onload = patternFill;     //在图片加载完成时执行绘图函数

    function patternFill() {     //定义绘图函数
        var redTexture = ctx.createPattern(pic, "repeat");   
        ctx.strokeStyle = redTexture; 
        ctx.moveTo(80,10);
        ctx.lineTo(10,90);
        ctx.lineWidth = 8;    //定义线段粗度为8像素
        ctx.stroke();
    }

</script>

这里写图片描述

ctx.lineWidth

注意：上述的通过 ctx.lineWidth = lineWeight 的形式来给线段设定粗度。

另外两个重要的线段的属性

⑴ lineCap是设定线段端点的形状（线帽），其值可以是
butt 默认，即线条端点为平直的边缘
round 线条端点为圆角线帽
square 为线条端点添加正方形线帽
这里写图片描述
⑵ lineJoin则是设定折线的交接处的外角类型，其值可为：
miter 默认，折线交接处为尖角
round 折线交接处为圆角
bevel 折线交接处为斜角

4.画矩形

canvas的api提供了三种方法:
clearRect(double x,double y,double w,double h)//清除
strokeRect(double x,double y,double w,double h)//strokeRect 表示绘制一个描边矩形
fillRect(double x,double y,double w,double h)//表示绘制一个实心矩形

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.fillRect(10,10,50,50);   //从画布上的(10,10)坐标点为起始点，绘制一个宽高均为50px的实心矩形
ctx.strokeRect(70,10,50,50);   //从画布上的(70,10)坐标点为起始点，绘制一个宽高均为50px的描边矩形
</script>

这里写图片描述
也可以使用 Rect( x, y, width, height ) 的方法创建矩形路径，之后再通过 .stroke() 或 .fill() 方法来给矩形上色。
fillStyle strokeStyle来定义上色，它们的赋值均为 color|gradient|pattern

补充：圆形渐变

ctx.createRadialGradient( Xstart, Ystart, Radiusstart, Xend, Yend, Radiusend )

var grd = ctx.createRadialGradient(35,35,0,35,35,36);  //定义放射状渐变对象，设定渐变线起始点和结束点坐标，坐标格式为(起始点x,起始点y,结束点x,结束点y)
grd.addColorStop(0,"yellow");   //定义渐变线起点颜色
grd.addColorStop(0.5,"blue");   //定义渐变线中间点的颜色
grd.addColorStop(1,"red");  //定义渐变线结束点的颜色
ctx.fillStyle = grd;   //将放射状渐变对象赋值给fillStyle
ctx.fillRect(10,10,50,50);   //从画布上的(10,10)坐标点为起始点，绘制一个宽高均为50px的实心矩形

clearRect清除

clearRect类似PS中的方块橡皮擦，可以擦除画布上任意一块矩形区域的内容，其语法如下：
ctx.clearRect( x, y, width, height );
其中 x 和 y 表示起始点坐标，width 和 height 表示这块“橡皮擦”的宽高。举个例子：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象

ctx.fillStyle = "red";   
ctx.fillRect(0,0,c.width,c.height);  
ctx.beginPath();
ctx.fillStyle = "blue";   
ctx.fillRect(10,20,60,60);  
ctx.clearRect(20,20,80,50);  //擦除以（20,20）坐标为起点，宽高为80*50的区域

这里写图片描述
注意clearRect不会清除掉之前定义过的样式、画笔位置等绘制信息，打个比方，有时候我们需要清空整个画布，我们可以这样做：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象

ctx.fillStyle = "blue";   
ctx.fillRect(10,20,60,60);  
//下面重置画布大小，从而清空画布
c.width = c.width;  //在jQ中可以写为 c.attr("width", c.width());  
c.height = c.height;  //在jQ中可以写为 c.attr("height", c.height());  
//重新绘制一个矩形
ctx.fillRect(10,20,60,60);

这个方法是通过重置画布大小，从而触发清空画布事件，但前面定义的 fillStyle=”blue” 也被清空掉了.重画的是黑色
如果不想清除掉之前定义的样式，我们可以通过clearRect来实现：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象

ctx.fillStyle = "blue";   
ctx.fillRect(10,20,60,60);  
//下面通过clearRect来擦除画布
ctx.clearRect(0,0,c.width,c.height);
//重新绘制一个矩形
ctx.fillRect(10,20,60,60);

重画的是蓝色。

多边形

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象

//定义样式
ctx.fillStyle = "blue";   
ctx.strokeStyle = "red";
ctx.lineWidth = "8";
ctx.lineJoin = "round";

//绘制多边形
ctx.moveTo(10,10);
ctx.lineTo(100,30);
ctx.lineTo(120,80);
ctx.lineTo(60,60);
ctx.lineTo(10,10);
ctx.closePath();  //闭合多边形路径
ctx.stroke();  //描边
ctx.fill();    //填充

备注

canvas函数列表：http://www.runoob.com/tags/ref-canvas.html

canvas学习相关链接http://www.cnblogs.com/vajoy/p/3996979.html

https://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html

本文参考：http://www.runoob.com/html/html5-canvas.html
http://www.cnblogs.com/vajoy/p/3914131.html

25King

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html5 canvas学习1-描边渐变直线矩形

1.坐标系统默认是300*150像素大小，以左上角为原点。canvas 的左上角坐标为 (0,0) 可以通过下面方式来交换坐标: 平移（translate）旋转（rotate）缩放（scale）2.创建<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas><scr
复制链接

扫一扫