canvas在线绘图

妖狐艹你老母 2022-04-04 13:48 656阅读 0赞

<html>
        
        <head>
            <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
            <style type="text/css">
        
            </style>
            <script type="text/javascript">
             function draw(){
                 var canvas =document.getElementById('myCanvas');
                 if(canvas.getContext){
                     var ctx=canvas.getContext('2d');/*创建2d Context对象*/
                     
                     ctx.fillStyle="#FF0000";/*颜色*/
                     ctx.fillRect(0,0,150,75);/* x,y,width,height*/
                     
                     ctx.fillStyle="rgba(0,0,200,0.5)";
                     ctx.fillRect(50,30,150,75); 
                 }
             } 
             </script>
            <script type="text/css">
               canvas{border:1px solid black;}
            </script>>
        </head>
        <body onload="draw();">
            <canvas id="myCanvas" ></canvas>
           
        </body>
       
    </html>

RGBA表示颜色：

语法：rgba（red,green,blue,alpha）

red,green,blue可以是0-255的整数值 ，alpha代表透明度：取值范围：0.0-1.0，1代表完全不透明。

运行结果：

![20181217172317545.png][]

[20181217172317545.png]: /images/20220404/d013e89294d64cb493d69cd1b2c6049d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，656人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android 绘图(二) Canvas

上篇文章，我们讲述了Paint(画笔)类的。如果你还未了解，那么可以先看看这篇文章，[ Android 绘图(一) Paint][Android _ Paint]。今天这

比眉伴天荒/ 2022年07月21日 11:28/ 0 赞/ 246 阅读

相关 JavaScript笔记：使用canvas绘图

不用说，HTML5 添加的最受欢迎的功能就是canvas元素。这个元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态地在这个区域中绘制图形。 IE9+、

「爱情、让人受尽委屈。」/ 2022年07月16日 02:57/ 0 赞/ 222 阅读

相关 SWT之Canvas绘图

在很多时候我们做用户界面的时候，可以直接用SWT给我们提供的组件，但是如果我们的应用SWT没有直接提供组件使用的话，可以自己动手画一个组件，然后添加相应的listener。

拼搏现实的明天。/ 2022年07月15日 11:59/ 0 赞/ 317 阅读

相关 JS_绘图_canvas

一、绘图的必要步骤 1. 创建画布（纸） ①、需要在body中添加canvas同时初始化画布的大小如： < canvas id= "can" widt

妖狐艹你老母/ 2022年06月10日 06:16/ 0 赞/ 231 阅读

相关 HTML5 Canvas 开发绘图方法整理【三、canvas线条样式、线帽】

1、线条宽度 ctx.lineWidth= 整数值 ; 取值必须为整数，不写默认为1 ，单位默认是px ; ctx.lineWidth=15; //绘制一条高

青旅半醒/ 2022年05月31日 08:35/ 0 赞/ 261 阅读

相关 Canvas绘图--放缩

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

港控/mmm°/ 2022年05月28日 12:20/ 0 赞/ 286 阅读

相关 canvas在线绘图

<html> <head> <script type="text/javascript" src="jquer

妖狐艹你老母/ 2022年04月04日 13:48/ 0 赞/ 657 阅读

相关 Canvas绘图

Canvas绘图 Canvas简介 Canvas是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使

爱被打了一巴掌/ 2022年03月15日 01:44/ 0 赞/ 354 阅读

相关 H5使用Canvas绘图

一、什么是Canvas Canvas 是H5的一部分，允许脚本语言动态渲染图像。Canvas 定义一个区域，可以由html属性定义该区域的宽高，javascrip

Love The Way You Lie/ 2022年02月25日 06:04/ 0 赞/ 390 阅读

相关 uniapp canvas绘图生成海报

组件：tki-qrcode.vue 交流群：836383650 <template> <view class="content"> <butt

妖狐艹你老母/ 2021年09月19日 13:18/ 0 赞/ 1452 阅读