<!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. 关于make及makefile的工作笔记

    之前一直是用java的,最近工作中需要在Linux中写一个C++程序,之前的写法很不规范,只有一个CPP.记录一下关于makefile的相关知识 想要完整的了解相关内容,推荐看这本书<程序员的自 ...

  2. Spring Boot Jpa 多条件查询+排序+分页

    事情有点多,于是快一个月没写东西了,今天补上上次说的. JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将 ...

  3. 必看！2020最新黑马JAVA 学习路线

    https://www.fang1688.cn/2020/08/24/%e5%bf%85%e7%9c%8b%ef%bc%81java-%e5%ad%a6%e4%b9%a0%e8%b7%af%e7%ba ...

  4. CSS3动画之animation-timing-function中的stepshan shu

    1.概念 animation-timing-function是规定动画的速度曲线,一般使用的是cubic-bezier() 控制动画曲线的,属性值一般有ease/ease-in/ease-out等,而 ...

  5. 模拟IIC总线多设备挂载（12864OLED屏幕+GY30光照传感器）

    最终效果展示 OLED屏幕和GY30光照传感器(BH1750FVI)都连接在一个IIC(I2C)总线上,所以只需要接4根线即可.获取到的光照强度可以在OLED上实时显示并通过串口打印.IIC是IO模拟 ...

  6. python 四位玫瑰数 + 100以内素数求和

    四位玫瑰数 描述‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬ ...

  7. idea vue文件设置tab为四个空格

    1.找到vue项目中有个叫.editorconfig的文件,打开可以发现有以下配置项:  2.ctrl+alt+i看看效果(单文件)  3.IDEA中对整个项目进行代码格式化 在项目的左侧树结构中,右 ...

  8. python小白入门基础（二：变量）

    #变量:可以改变的量就是变量,实际上是由内存开辟的一块空间,临时存在内存中,以便后续代码使用.#作用:代指内存中某个地址中的内容. #1.变量的概念name = "王五"name ...

  9. deepin20 安装英伟达闭源驱动

    第一步.安装深度的"显卡驱动器" 在deepin v20 中默认没有显卡驱动管理器,需要命令行安装,命令如下(刚开始一直出错,当我第一次打开应用商店,就可以安装了,好神奇): su ...

  10. java-数组的排序

    package day02; public class SelectSort { public static void selectSort(int[] arr){ for(int x=0;x< ...