Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果

绘制矩形:

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

fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
         #myCanvas{ border: 1px dotted #aaaaaa; padding:10px; }
        </style>
    </head>
    
    <body>
        <canvas id="myCanvas" width="300" height="200"> </canvas>
        <script>
        var c = document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.fillStyle="#FF0000";
        cxt.fillRect(10,10,150,100); 
        </script>
    </body>
    
</html>

绘制圆形:

创建圆形路径时需要用到对象的arc方法,方法定义如:XXX.arc(x,y,radius,startAngle,endAngle,anticlockwise)

x为圆形起点的横坐标,y为圆形起点的纵坐标,radius为圆形半径,startAngle为开始角度,endAngle为结束角度,anticlockwise是否按顺时针方向进行绘制。

XXX.beginPath() 创建路径,XXX.closePath() 结束路径,然后XXX.fill() 渲染即可。

<script>
        var c = document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.fillStyle="#ff0000";
        cxt.beginPath();
        cxt.arc(50,50,30,0,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
</script>

绘制线条形:

moveTox,y)指定从何处(x,y)开始,lineTo指定在何处结束,来绘制一条线:

然后 调用stroke()实现绘制。

<script>
        var c = document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.moveTo(20,20);
        cxt.lineTo(40,90);
        cxt.lineTo(80,70);
        cxt.lineTo(130,90);
        cxt.stroke();
</script>

绘制渐变效果:

使用您指定的颜色来绘制渐变背景,跟绘制普通矩形差不多,只是fillStyle的值为渐变色了而已。

线性渐变:

方法 createLinearGradient(0,0,150,100); 指定了创建线性渐变色范围

方法 grd.addColorStop(0,"#ff0000");   grd.addColorStop(1,"#00ff00"); 为渐变色指定渐变“开始与结束”

 假如你想实现一个上下的线性渐变的效果,那么你应该在调用createLinearGradient(x0,y0,x1,y1) 创建渐变的时候保证点(x0,y0),点(x1,y1)连成的直线为竖直直线,也就是x0=x1。

当然你也可以实现对角线渐变的效果,只要(x0,y0) (x1,y1)组成一条对角线就可以了。

创建上下渐变和对角线渐变可以这样来:

createLinearGradient(0,0,0,300);    // 创建上下渐变

createLinearGradient(10,10,300,300);    // 创建对角线渐变

<script>
        var c = document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        var grd = cxt.createLinearGradient(0,0,150,100);
        grd.addColorStop(0,"#ff0000");
        grd.addColorStop(1,"#00ff00");
        cxt.fillStyle = grd;
        cxt.fillRect(0,0,150,70);
</script>

径向渐变:

createRadialGradient(x0,y0,r0,x1,y1,r1)    

创建一个沿两个圆之间的锥面绘制渐变。前三个参数代表一个圆心为(x0,y0)半径为r0的开始圆,后三个参数代表圆心为(x1,y1)半径为r1的结束圆。

比如 var grd = cxt.createRadialGradient(100,100,30,100,100,70)

就创建了一个由圆心(100,100)半径为30的圆 ---》 圆心(100,100)半径为70的圆  的渐变效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的诗和远方

Canvas画图-一个比想象中更骚气的圆(渐变圆环)

之前介绍了Canvas画图基础,这篇介绍一下画一个带渐变效果的圆。 一个渐变的圆环 渐变色应用广泛,和圆环结合做进度条非常酷,今天我们就来画一个这样的圆环...

1.1K70
来自专栏Nian糕的私人厨房

CSS 布局_2 Flex弹性盒

弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代...

12640
来自专栏Android常用基础

自定义View(二)-动画- 代码生成View动画

上篇我们介绍了视图动画,说的确切点应该是视图动画中的补间动画(Tween Animation),关于逐帧动画(Frame Animation)用法更简单,这里先...

13910
来自专栏QQ空间开发团队的专栏

手 Q 人脸识别动画实现详解

当存在多个人脸的时候进行主次脸动画的切换,摄像头移动的时候动画的追踪,多个动画的之间的时序控制等问题,总之,UI 展示加上各种业务逻辑使得这个动画变得异常复杂。

2.1K40
来自专栏前端儿

CSS3的变形transform、过渡transition、动画animation学习

变形有rotate旋转、scale缩放、translate位移、skew倾斜、matrix矩阵变形、perspective透视几种操作,通过例子来了解各个操作

34310
来自专栏前端黑板报

canvas-画线

坐标系统简析 ? 左边是笛卡尔坐标系,右边是canvas坐标系。 笛卡尔坐标系(Cartesian coordinate system): 也称直角坐标系,是一...

27990
来自专栏Android开发与分享

【Android】RecyclerView:打造悬浮效果

1.1K100
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 relative 篇

限制描述:absolute设置了方位值时,这些方位值是相对于position不为static的最近的父元素来定位的。如果父元素设置了relative,方位值就会...

9520
来自专栏九彩拼盘的叨叨叨

SVG 直线路径写法示例

大写字母表示到后面值为绝对值,小写字母表示后面值为相对当前点的值 画一条起点是(10, 10)终点点是 (20, 30) 的线

10140
来自专栏HTML5学堂

CSS3渐变,就是这么玩

HTML5学堂(码匠):渐变背景是一直在页面中常见的元素之一,但是在之前所有的渐变背景都是通过设计师通过图形软件设计出来的背景图。其实这种方法比较麻烦,需要设计...

44850

扫码关注云+社区

领取腾讯云代金券