<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <style type="text/css">

        #MyCanvas {

            border: 1px solid #f60;

        }

    </style>

    <body>

        <!--创建一个canvas标签并设置大小-->

        <canvas id="MyCanvas" height="600" width="500"></canvas>

    </body>

    <script type="text/javascript">

        //创建图像

        var img = new Image();

        img.src = 'img/0.png';

        window.onload = function() {

            var MyCanvas = document.getElementById('MyCanvas');

　　　　　　　//getContext() 方法返回一个用于在画布上绘图的环境,2d为二维绘图

            var ctx = MyCanvas.getContext('2d');

            //开始绘制

            ctx.beginPath();

            //设置填充图像,定位点X Y,宽高

            ctx.rect(50, 50, 100, 100);

            //设置样式

            ctx.fillStyle = "red";

            ctx.fill();

            //图像阴影：1.阴影颜色2.X Y 为阴影方向3.模糊程度

            ctx.shadowColor = "#FF6600";

            ctx.shadowOffsetX = 10;

            ctx.shadowOffsetY = 10;

            ctx.shadowBlur = 5;

            //设置边框

            ctx.strokeStyle = 'lightblue';

            ctx.stroke();

            //开始一条路径,或重置当前路径

            ctx.beginPath();

            //图像位置移动

            ctx.moveTo(500, 150);

            //绘制路径

            ctx.lineTo(300, 100);

            ctx.lineTo(300, 200);

            ctx.lineTo(300, 200);

            ctx.lineTo(300, 200);

            ctx.fillStyle = 'lightcoral';

            ctx.fill();

            ctx.beginPath();

            ctx.moveTo(200, 50);

            ctx.lineTo(300, 100);

            ctx.lineTo(300, 200);

            ctx.lineTo(300, 200);

            ctx.lineTo(300, 200);

            ctx.fillStyle = 'lightcoral';

            ctx.fill();

            ctx.beginPath();

            ctx.moveTo(400, 50);

            ctx.lineTo(300, 100);

            ctx.lineTo(300, 200);

            ctx.lineTo(300, 200);

            ctx.lineTo(300, 200);

            ctx.fillStyle = 'lightgreen';

            ctx.fill();

            ctx.beginPath();

            ctx.moveTo(100, 250);

            ctx.lineTo(50, 300);

            ctx.lineTo(150, 300);

            //克隆一条边框

            ctx.closePath();

            //边框大小

            ctx.lineWidth = 10;

            ctx.stroke();

            ctx.strokeStyle = 'lightskyblue';

            ctx.beginPath();

            //中心点X Y,半径r,起始弧度,结束弧度,true/false为半圆方向

            //去掉'2*'为半圆

            ctx.arc(250, 250, 50, 0, 2 * Math.PI);

            ctx.fill();;

            //放置文字

            ctx.beginPath();

            ctx.font = '30px 微软雅黑';

            ctx.fillText("Hello Canvsas", 50, 350);

            //文字描边

            ctx.beginPath();

            ctx.lineWidth = 3;

            ctx.strokeText("Hello Canvsas", 50, 350);

            //放置图片

            ctx.beginPath();

            ctx.drawImage(img, 50, 400, 150, 150);

        }

    </script>

</html>

canvas的简单绘制及设置的更多相关文章

  1. Canvas 旋转风车绘制

    写在前面:   亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写的不好的地方,烦请同学们谅解,如果本文对你有一丁点帮助,还请劳驾您给我点个赞,您的认可将是我坚持下去的强大动力!谢谢! 在进行教学之前 ...

  2. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

  3. canvas教程(二) 绘制直线

    经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...

  4. Android中使用Canvas和Paint绘制一个安卓机器人

    场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...

  5. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

  6. Html5 Canvas一个简单的画笔例子

    相比了下Qt quick的canvas和HTML5的canvas,发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多,附上一个HTML5 canvas画笔一例子 var D ...

  7. -_-#【Canvas】导出在<canvas>元素上绘制的图像

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 简单的Slony-I设置实例 II

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL集群方案相关索引页     回到顶级页面:PostgreSQL索引页 接前面例子, 简单的Slony-I设置实例 这次我 ...

  9. Canvas 中drawImage 绘制不出图片

    在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...

随机推荐

  1. 阿里云鼠标垫，云中谁寄锦书来，阿里云定制GIT指令集鼠标垫

    活动地址 云中谁寄锦书来 活动时间 2020.8.19-8.28 奖品 必得,每日200份,共2000份 参考答案 tips:单选选择以上都是,多选就是全选 云效DevOps包含哪些产品- ABCDE ...

  2. 四则运算生成命令行程序 (Python)

    Github项目地址:Github Pages 结对项目成员:张鹏 3118004985 郑靓 3118004988 一.项目需求分析 二.功能实现 三.代码实现or功能说明 ★ GUI功能扩展说明 ...

  3. 记录一次CDH集群邮件报警功能的设置

    1.通用的配置CDH邮件报警设置 进入cloudera manager service页面,选择配置 左侧菜单Alert Publisher 勾选[启用电子邮件警报] 邮件服务协议smtp,如果使用s ...

  4. css基本样式设置

    div中文字居中 如何让一个div中的文字水平和垂直居中?设置如下: 给定该div的长宽(或者二者只给出其一也可) .box{ height: 100px; width: 30%; text-alig ...

  5. 企业网站SEO如何选择关键词

    http://www.wocaoseo.com/thread-17-1-1.html       企业网站的关键词应该如何去选择?有很多的企业老板在网上某某企业在网上做了一个网站,一天盈利多少后,觉得 ...

  6. 程序员小哥教你秋招拿大厂offer

    快要到秋招了,对于应届生来说,秋招是一个特别重要的机会.对于社招同学来说,金九银十也是一个很好的跳槽窗口. 而我呢,因为是从上海到广州工作,就没有提前先把工作定下来.刚好也趁这个机会出去旅游了两个月. ...

  7. Fitness - 05.08

    倒计时237天 运动34分钟,共计8组,3.4公里.拉伸10分钟. 每组跑步2分钟(6.6KM/h),走路2分钟(6KM/h). 最近掉了几斤,所以今天状态感觉特别好. 虽然每天在拼命学习Unity, ...

  8. unity physics相关

    1. With careful positioning and sizing, compound colliders can often approximate the shape of an obj ...

  9. 精选PDF版本书籍第一期

    福利概述 精选JAVA必读书籍的PDF版本(来源于网络,侵删). Effective java 中文版(第2版) Head First 设计模式(中文版) Java并发编程的艺术 Java技术手册(第 ...

  10. 深入了解Kafka【四】消费者的Offset管理

    1.Offset Topic Consumer通过提交Offset来记录当前消费的最后位置,以便于消费者发生崩溃或者有新的消费者加入消费者组,而引发的分区再均衡操作,每个消费者可能会分到不同的分区.我 ...