canvas-基础绘制

最新推荐文章于 2023-10-26 14:19:16 发布
最新推荐文章于 2023-10-26 14:19:16 发布
阅读量273 收藏
点赞数
分类专栏： HTML5 文章标签： canvas 基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnwyn314/article/details/78283688
版权

1. canvas基础绘制

画一个矩形，简单使用路径，绘制文字

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>测试canvas画布</h1>
<canvas id="canvasTest" width="500" height="300"></canvas>
<canvas id="canvasTest1" width="500" height="300"></canvas>
<canvas id="canvasTest2" width="500" height="300"></canvas>
<canvas id="canvasTest3" width="500" height="300"></canvas>
<script type="text/javascript">
    function draw(id){
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle = '#EEEEFF';
        context.fillRect(0,0,500,300);
        context.fillStyle = 'blue';
        context.strokeStyle = 'yellow';
        context.lineWidth = 1;
        context.fillRect(50,50,100,100);
        context.strokeRect(50,50,100,100);
        context.font = 'italic 20px sans-serif';
        var txt = "canvas画一个矩形";
        context.fillText(txt,10,30);
    };
    function draw1(id){
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle = '#EEEEFF';
        context.fillRect(0,0,500,300);
        for(var i=0; i<10; i++){
            context.beginPath();  // 绘制开始
            context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
            context.closePath();  // 绘制结束
            context.fillStyle='rgba(255,0,0,0.25)';
            context.fill();
        }
        context.font = 'italic 20px sans-serif';
        var txt = "canvas使用路径绘制圆";
        context.fillText(txt,100,30);
    };
    function draw2(id){
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle = '#EEEEFF';
        context.fillRect(0,0,500,300);
        var dx = 150;
        var dy = 150;
        var s = 100;
        context.beginPath();  // 绘制开始
        context.fillStyle='rgb(100,255,100)';
        context.strokeStyle = 'rgb(0,0,100)';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 *11;

        for(var i=0; i<30; i++){
            var x = Math.sin(i*dig);
            var y = Math.cos(i*dig);
            context.lineTo(dx + x * s, dy + y * s);
        }

        context.closePath();  // 绘制结束
        context.fill();
        context.stroke();
        context.font = 'italic 20px sans-serif';
        var txt = "canvas使用路径-lineTo";
        context.fillText(txt,100,30);
    }

    function draw3(id) {
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        /*context.fillStyle = '#000000';
        context.font = 'italic 20px sans-serif';
        context.textBaseline = 'top';
        context.fillText('示例文字',0,0);*/
        context.font = 'italic 20px sans-serif';
        var txt = "绘制文字及复用";
        var tml = context.measureText(txt);
        context.fillText(txt,10,30);
        context.fillText(tml.width,tml.width+10,30);
        context.font = "bold 30px sans-serif";
        var tm2 = context.measureText(txt);
        context.fillText(txt, 10,70);
        context.fillText(tm2.width, tm2.width + 10, 70);
    }
    draw3('canvasTest3');
    draw2('canvasTest2');
    draw('canvasTest');
    draw1('canvasTest1');
</script>
</body>
</html>
wyn314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas-basic-graphics.zip
03-24
canvas绘制基础图形（canvas 气泡框 网格线 三角形 圆角矩形 箭头）1.初始化画布 initCanvas * 2.绘制网格线 drawGridlines * 3.绘制圆点 drawDot * 4.绘制圆环 drawRing
canvas 基本绘制、矩形、渐变、阴影、全局透明度、图层、保存还原绘图状态
weixin_43294560的博客
01-14 936
canvas 用来'替代'flash等其他用于做动画或游戏的插件的一个标签 1、可以理解为div,提供一个区域用来绘制图形 2、习惯在标签上对其大小进行设置，而不是css或js,并且标签中添加文本<canvas width='xxpx' height='xxpx'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas> 原因:支持ca...
微信小程序Canvas画布绘制以及保存
lw934934的博客
07-23 1449
Canvas画布。
canvas中save和restore
xiaoxiaowangtx的博客
12-29 153
save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。 对canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作，所以如果不对canvas进行save以及restore，那么每一次绘图都会在上一次的基础上进行操
canvas学习心得之save与restore
海阔天空
10-28 383
在运用canvas画图的时候，如果我们使用过放大、缩小、平移、重置画布原点等方法的话，那么在画下一个图的时候，有可能得到的结果并不是我们想要的，例如，我用了重置画布原点属性画的时钟，时钟每走一秒图画就会偏离，如图1：                                                  图1：偏离
【基础知识】HTML5 Canvas getImageData()和 putImageData() 在Canvas中绘制表面的保存与恢复(应用场景)
苏一恒
08-20 1399
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 应用场景 在需要对画布内进行鼠标的细致操作时，需要用辅助线： 1、鼠标进入画布时，先用getImageData()保存之前的ca...
Canvas中保存画布状态及还原
小头Sophia
04-19 6468
1.save();  restore(); 示例代码： html> lang="en"> charset="UTF-8"> form测试 type="text/css"> #can{ background: pink; } id="can" width="800px" height="60
保留每次Canvas绘画后的图，以供下次使用
kalogen的专栏
06-26 1207
public void onDraw(Canvas canvas){Bitmap bitmap = Bitmap.createBitmap(480, 104, Config.ARGB_8888); Canvas c = new Canvas();c.setBitmap(bitmap);然后使用c绘图(bitmap保存了绘制的图)最后把bitmap画到你的canvas上canvas.drawBitm...
关于canvas的使用（超详细的canvas知识体系讲解）
adminsir0的博客
06-07 7884
canvas,js特效，图形绘制，路径绘制，图片绘制，动画效果，贝塞尔曲线
28.坑王驾到第三期：uniapp绘画canvas不能保留之前绘制的内容
endingCode
10-26 192
uniapp绘画canvas不能保留之前的内容
View.onDraw(Canvas canvas)
jb_home的博客
11-27 905
一般UI控件不满足我们的需求的时候，就需要自定义View。自定义view的一个重点就是实现去重写他的绘制过程,也就是View.onDraw(Canvas canvas)方法，它里面就是绘制图形的过程了，比如说一个Button，绘制按钮和按钮上的文字都是在它自己的onDraw方法中完成的。如果你想给ImageView加个蒙版，可以继承ImageView并且重写他的onDraw方法，调用完父类的onDraw之后，再自己Canvas来画一个黑色的半透明矩形，这样就可以对现有的控件进行加工了。 Canvas是画布
canvas-demo:通过拖拽绘制矩形，通过拖拽移动矩形，保存canvas画布为图片
04-29
canvas-demo ...canvas的基础用法大家可以去查看文档，相信会看文档的人都会用了。以下列出了常用的几个api。 // ctx为canvas上下文对象 ctx.beginPath() // 开始一个路径 ctx.moveTo(x,y) // 路径移
canvas-basic-graphics.js
03-13
canvas绘制基础图形（canvas 网格线 三角形 圆角矩形 箭头）的插件，包含初始化画布、绘制网格线 、绘制圆点、绘制圆环 、绘制图片等
Canvas 基础绘制
03-29
以下所有 set 打头的方法均为微信小程序特有, 去掉 set 即为 CanvasRenderingContext2D 的属性名. .stroke() 描出当前路径  .setStrokeStyle(color) 设置路径颜色  .setLineWidth(Number lineWidth) 设置路径宽度...
大学物理册答案上下都有
04-26
大学物理册答案上下都有
UWB超宽带信道研究及源码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Suno AI语音技术的资源描述
04-26
Suno AI 是一家领先的人工智能（AI）公司，专注于开发创新的语音技术和解决方案。以下是关于 Suno AI 的资源描述： 语音识别技术：Suno AI 拥有先进的语音识别技术，能够准确地将语音转换为文本。他们的语音识别系统经过了大量的训练和优化，具有高度的准确性和鲁棒性，可应用于多种场景，如语音助手、语音搜索、智能客服等。 语音合成技术：除了语音识别，Suno AI 还致力于开发自然、流畅的语音合成技术。他们的语音合成系统能够生成高质量、逼真的语音输出，可以用于语音助手、自动化客服、有声书等领域。 智能语音应用开发：Suno AI 提供了一系列工具和平台，帮助开发者快速构建和部署智能语音应用。他们的开发工具包括 API 接口、SDK、开发文档等，支持多种编程语言和平台，让开发者可以轻松地集成语音功能到自己的应用中。 行业解决方案：Suno AI 为各行各业提供定制化的语音解决方案，满足客户特定的需求和业务场景。他们与零售、金融、医疗等领域的企业合作，提供智能语音客服、语音导航、语音支付等解决方案，帮助客户提升服务质量和效率。
基于matlab的射线信道模型内含数据集.zip
最新发布
04-26
基于matlab的射线信道模型内含数据集.zip
基于Lidar数据的概率占位栅格图(Occupancy Grid Map)+Python代码实现.pdf
04-26
基于Lidar数据的概率占位栅格图(Occupancy+Grid+Map)+Python代码实现.pdf
Canvas 绘制曲线
07-25
Canvas绘制曲线可以使用曲线和弧线两种方式。曲线是由一系列的点连接而成，每个点都有相同的曲率。而弧线则是圆周上的一部分。在Canvas中，可以使用moveTo(x, y)和lineTo(x, y)方法来绘制曲线。例如，可以使用以下代码在Canvas中绘制一个曲线图形： ```html <canvas width="600" height="300" id="cvs"></canvas> <script> var oCanvas = document.getElementById('cvs'); var ctx = oCanvas.getContext('2d'); ctx.moveTo(10, 100); for(var i = 10; i < 600; i++){ var x = i; var y = 10 * Math.cos(x/10) + 100; ctx.lineTo(x, y); } ctx.strokeStyle = "orangered"; ctx.stroke(); </script> ``` 这段代码使用了Math.cos()函数来计算每个点的y坐标，然后使用lineTo()方法将点连接起来，最后使用stroke()方法绘制出曲线。\[1\] 除了使用曲线，还可以使用贝塞尔曲线来绘制曲线。贝塞尔曲线是根据四个位置任意的点坐标绘制出的一条光滑曲线。在Canvas中，可以使用bezierCurveTo(dx1, dy1, dx2, dy2, x, y)方法来绘制贝塞尔曲线。例如，可以使用以下代码在Canvas中绘制一个贝塞尔曲线： ```html <canvas width="600" height="300" id="cvs"></canvas> <script> var oCanvas = document.getElementById('cvs'); var ctx = oCanvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 150); ctx.bezierCurveTo(100, 50, 200, 200, 250, 100); ctx.strokeStyle = "#FF0000"; ctx.lineWidth = 5; ctx.stroke(); </script> ``` 这段代码使用了bezierCurveTo()方法来绘制贝塞尔曲线，其中的参数分别表示控制点和终点的坐标。\[2\] 综上所述，Canvas可以使用曲线和贝塞尔曲线两种方式来绘制曲线图形。 #### 引用[.reference_title] - *1* *3* [canvas基础入门系列教程(5)-绘制曲线图形](https://blog.csdn.net/keledon/article/details/87114689)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [详述Canvas(四)/绘制曲线](https://blog.csdn.net/rentian1/article/details/78681655)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值