canvas画图

小编 2026-06-20 阅读:890 评论:0

<!DOCTYPE html><html> <head>...

<!DOCTYPE html><html>    <head>        <title>canvas</title>    </head>    <body>        <canvas id="canvas" width="500" height="600" style="border:1px solid #ddd;">            浏览器不支持        </canvas>        <script type="text/javascript">            var canvas = document.getElementById("canvas");            var context = canvas.getContext("2d");                                    // context.moveTo(10,10);            // context.lineTo(150,50);            // context.lineTo(10,50);            // context.stroke();                        //划矩形 200*200            context.fillStyle = "#ff0000";            context.fillRect(0,0, 500,600);                        //划线            context.moveTo(200,200);            context.lineTo(500,500);            context.lineTo(150,300);            context.stroke();//执行划线                            //划圆            context.fillStyle = "#00ff00";            context.beginPath();            context.arc(250,300,50,0,2*Math.PI, true);            context.closePath();            context.fill();                        //划渐变            var gradient = context.createLinearGradient(0,0,250,0);            gradient.addColorStop(0, "#ff0000");            gradient.addColorStop(1, "#00ff00");            context.fillStyle = gradient;            context.fillRect(0,0,250,250);                        //划现有的图片            var img = new Image();            img.src = "1.jpg";            context.drawImage(img, 0, 0);                            </script>    </body></html>

效果如下：

版权声明

本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。

上一篇：extend与implements小例子 下一篇：centos7平台集成Jenkins+gitlab

热门文章

机房智能化温湿度解决方式之POE供电以太网温湿度传感器

机房智能化温湿度解决方式之POE供电以太网温湿度传感器北京盈创力和电子科技有限公司智能型TCP网口温湿度记录仪北京IP网络温湿度记录仪厂家，北京盈创力和北京智能型TCP网口温湿度记录仪IP网络温湿度记录仪是一种新型的基于TCP/IP协议双绞线以太网标准温湿度采集模块，利用它可以实现现场温度值、相对湿度值的采集，同时利用其自身的RJ45通信接口可以方便地和机房监控主机或交换机集线器进行联网。工作于-40℃～85℃工业级带...
Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering

Problem Statement 我们考虑一个具有马尔可夫性质、非线性、非高斯的状态空间模型(State Space Model)：对于一个时间序列上的观测结果{yt,t∈N}\\{ y_t , t \\in N \\}{yt,t∈N}，我们认为每个观测结果yty_tyt的生成依赖于一个无法直接观察的隐变量xt∈{xt,t∈N}x_t \\in \\{x_t , t \\in N \\}xt∈{xt,t∈N}，即：p(...
HTTP状态保持的原理

a)在用户登录之后，浏览器返回响应的时候会在响应中添加上cookieb)浏览器接收到cookie之后会自动保存c)当用户再次请求同一服务器中的其他网页的时候，浏览器会自动带上之前保存的cookied)服务接收到请求之后可以请 request 对象中取到cookie 判断当前用户是否登录　　Http是无状态的，就是连接时数据互通，关闭后...
Hive 系统函数及示例

查看所有系统函数 show functions; 函数分类内置函数【系统函数】数学函数： floor、round、ceil、cos、log2等字符串函数： length、reverse、trim、lower、get_json_object、repeat等收集函数： size 转换函数： cast 日期函数： year、month、datediff、date、date_add等条件函数： coalesce、case…w...
CSRF的原理和防范措施

a)攻击原理：i.用户C访问正常网站A时进行登录，浏览器保存A的cookieii.用户C再访问攻击网站B，网站B上有某个隐藏的链接或者图片标签会自动请求网站A的URL地址,例如表单提交，传指定的参数iii.而攻击网站B在访问网站A的时候，浏览器会自动带上网站A的cookieiv.所以网站A在接收到请求之后可判断当前用户是登录状态，所以...