开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Canvas图形绘制

简介: Canvas图形绘制
+关注继续查看

Canvas图形绘制


矩形绘制


  • rect(x,y,w,h) 没有独立路径


  • strokeRect(x,y,w,h) 有独立路径,不影响别的绘制


  • fillRect(x,y,w,h) 有独立路径,不影响别的绘制


  • clearRect(x,y,w,h) 擦除矩形区域


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*绘制矩形路径 不是独立路径*/
    ctx.rect(100,100,100,100);
    ctx.fillStyle = 'green';
    ctx.stroke();
    ctx.fill();

    /*绘制矩形  有自己的独立路径*/
    ctx.fillStyle = 'red';
    ctx.strokeRect(200,200,100,100);
    
    ctx.fillStyle = 'skyblue';
    ctx.fillRect(300,300,100,100);
    /*清除矩形的内容*/
    // ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

</script>
</body>
</html>


createLinearGradient()方法


绘制渐变颜色矩形


image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
/*        .linearGradient{
            width: 400px;
            height: 100px;
            background-image: linear-gradient(to right,pink,blue);
        }*/
    </style>
</head>
<body>
<div class="linearGradient"></div>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*fillStyle 'pink' '#000' 'rgb()' 'rgba()' */
    /*也可以使用一个渐变的方案了填充矩形*/
    /*创建一个渐变的方案*/
    /*渐变是由长度的*/
    /*x0y0 起始点 x1y1 结束点  确定长度和方向*/
    var linearGradient = ctx.createLinearGradient(100,100,500,400);
    linearGradient.addColorStop(0,'pink');
    //linearGradient.addColorStop(0.5,'red');
    linearGradient.addColorStop(1,'blue');

    ctx.fillStyle = linearGradient;

    ctx.fillRect(100,100,400,100);

    /*pink---->blue*/
    /*回想线性渐变---->要素 方向  起始颜色 结束颜色 */
    /*通过两个点的坐标可以控制 渐变方向*/
</script>
</body>
</html>


圆弧绘制


弧度概念


这就和数学中的概念知识是一样的。


  1. 弧度 : 是一种长度的描述单位


  1. 一个弧度怎么去描述 一个圆有多少个弧度 2 * π


  1. 一弧度有多长 一个弧度一个半径的长度


名词:


  • 角度:一个圆是360度


  • 半径:已一个点为中心多长为放射半径


  • 周长:2 * π * r


最终的结论:一个角度等于多少弧度 π/180


用三角函数体验曲线的绘制


image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.体验曲线的绘制*/
    /*2.线是由点构成的*/
    /*3.曲线可以由数学公式得来*/

    /*公式:y = x/2 */
    /*公式:y = (x + 2) ^2  */
    /*公式:y = sin(x) */

    for(var i = 1 ; i < 600 ; i ++){
        var x = i;
        //var y = x/2;
        //var y = Math.pow(x/10-30,2);
        var y = 50*Math.sin(x/10) + 100;
        ctx.lineTo(x,y);
    }
    ctx.stroke();



</script>
</body>
</html>


arc() 方法画圆弧


arc(x,y,r,startAngle,endAngle,anticlockwise)


参数:


  • x 圆心横坐标


  • y 圆心纵坐标


  • r 半径


  • startAngle 开始角度


  • endAngle 结束角度


  • anticlockwise 是否逆时针方向绘制(默认false表示顺时针;true表示逆时针)


image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*绘制圆弧*/
    /*确定圆心  坐标 x y*/
    /*确定圆半径  r */
    /*确定起始绘制的位置和结束绘制的位置  确定弧的长度和位置  startAngle endAngle   弧度*/
    /*取得绘制的方向 direction 默认是顺时针 false 逆时针 true */

    /*在中心位置画一个半径150px的圆弧左下角*/
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    ctx.arc(w/2,h/2,150,Math.PI/2,Math.PI,true);
    ctx.stroke();


</script>
</body>
</html>


圆实例练习


绘制六种颜色等分的圆


image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    var w = ctx.canvas.width;
    var h = ctx.canvas.height;

    /*分成几等分*/
    var num = 360;
    /*一份多少弧度*/
    var angle = Math.PI * 2 / num;

    /*原点坐标*/
    var x0 = w / 2;
    var y0 = h / 2;

    /*获取随机颜色*/
    var getRandomColor = function () {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    /*上一次绘制的结束弧度等于当前次的起始弧度*/
    //var startAngle = 0;
    for (var i = 0; i < num; i++) {
        var startAngle = i * angle;
        var endAngle = (i + 1) * angle;
        ctx.beginPath();
        ctx.moveTo(x0, y0);
        ctx.arc(x0, y0, 150, startAngle, endAngle);
        /*随机颜色*/
        ctx.fillStyle = getRandomColor();
        ctx.fill();
    }


</script>
</body>
</html>



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Canvas入门(一)
Canvas入门(一)
15 0
Canvas入门(四)
Canvas入门(四)
20 0
canvas烟花效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.
786 0
第167天:canvas绘制柱状图
canvas绘制柱状图 1、HTML 1 DOCTYPE html> 2 3 4 5 6 06柱状图面向对象版本 7 8 body { 9 padding: 0; 10 ma...
1034 0
canvas画图
DOCTYPE html> canvas 浏览器不支持 var canvas = document.
912 0
canvas绘制贝塞尔曲线
原文:canvas绘制贝塞尔曲线 1、绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪: DOCT...
802 0
canvas应用-思维导图
canvas应用例子-思维导图效果图如下:函数说明: // 求圆上一点坐标,返回坐标点 function circlePoint(x, y, r, a) { var tmpx = x + r * Math.
1187 0
HTML5 Canvas组件绘制太极图案
一实现思路: 实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘 制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色 和白色的圆在绘制好的黑白圆之内,半径恰好是黑白大圆一半。
826 0
HTML5 组件Canvas实现图像灰度化
HTML5发布已经有很长一段时间了,一直以来从来没有仔细的看过,过年刚来随便看看 发现HTML5中的Canvas组件功能是如此的强大,不怪很多牛人预言Flash已死,死不死 不是我要关心的,我关心的Canvas可以很轻松在网页中实现简单相框和图像灰度化。
779 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载