<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非零环绕原则</title>
</head>
<body>
<canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">
The current browser does not support Canvas, can replace the browser a try!
</canvas> <script> window.onload = function(){
var canvas = document.getElementById('canvas'); canvas.width = 1024;
canvas.height = 768; if(canvas.getContext('2d')){
var context = canvas.getContext('2d'); context.beginPath();
context.rect(100,100,600,600);
pathRect(context,200,200,400,200);
pathTriangle(context,300,450,150,650,450,650);
context.arc(550,550,100,0,Math.PI*2,true);
context.closePath(); context.fillStyle = "#058";
context.shadowColor = "gray";
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.fill(); }else{
alert('当前游览器不支持Canvas,请更换游览器后再试!');
}
} function pathRect(cxt,x,y,width,height){
cxt.moveTo(x,y);
cxt.lineTo(x,y+height);
cxt.lineTo(x+width,y+height);
cxt.lineTo(x+width,y)
cxt.lineTo(x,y);
} function pathTriangle(cxt,x1,y1,x2,y2,x3,y3){
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.lineTo(x3,y3);
cxt.lineTo(x1,y1);
} </script>
</body> </html>

canvas-9NonZeroAroundPrinciples2.html的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. Javascript高级编程学习笔记(30)—— BOM(4)navigator对象

    window对象作为浏览器的全局对象.location对象保存了页面的url信息 那么navigator对象又有什么作用呢? navigator对象 该对象最早由 Netspace Navigator ...

  2. 使用Java类加载SpringBoot、SpringCloud配置文件

    我们都知道平常在使用SpringBoot和SpringCloud的时候,如果需要加载一两个配置文件的话我们通常使用@Value("${属性名称}")注解去加载.但是如果配置文件属性 ...

  3. JavaScript标识符与关键字和保留字

    区分大小写 JavaScript中的一切(变量.函数名.操作符)都区分大小写.例如,变量名itbsl和变量名ITbsl是两个不同的变量. 标识符 所谓标识符,就是指变量.函数.属性的名字,或者函数的参 ...

  4. 多线程 start 和 run 方法到底有什么区别?

    昨天栈长介绍了<Java多线程可以分组,还能这样玩!>线程分组的妙用.今天,栈长会详细介绍 Java 中的多线程 start() 和 run() 两个方法,Java 老司机请跳过,新手或者 ...

  5. Tomcat添加HTTPS单向认证和双向认证

    前言 前一段时间有了解如何配置Tomcat服务为Https单向认证和双向认证,当时也做了一些记录,今天开始写博客,就把以前的记录拿出来整理下,分享给大家.本文没有介绍证书如何生成,会在下一篇博文里介绍 ...

  6. Django ListView实现分页

    效果: url.py main-urls from django.urls import path,include urlpatterns = [ path('admin/', admin.site. ...

  7. Flask依赖和启动流程回顾

    flask 有两个核心依赖库:werkzeug 和 jinja,而 werkzeug 又是两者中更核心的. werkzeug werkzeug负责核心的逻辑模块,比如路由.请求和应答的封装.WSGI ...

  8. State状态模式

    1.简介 在日常开发中,某些对象的状态如果发生改变,对应的行为也将发生改变,那么如何在运行时根据对象的状态动态的改变对象的行为,同时不产生紧耦合关系(即使用if else或者swith所带来的紧耦合关 ...

  9. mysql 导入 CSV文件命令行 ERROR 13 (HY000): Can't get stat of

    一定要查看好CSV字段结构是否和文件的表结构字段一致 load data local infile 'F:/MySqlData/test1.csv' --CSV文件存放路径 into table st ...

  10. Eureka客户端注册多网卡下IP选择问题

    在使用Spring Cloud多人协作开发时有一个场景:我本机启动了Eureka注册中心,其他人机器需要将服务注册到我本机的Eureka.(服务端和客户端在不同机器上) 这时出现了一个问题:服务成功注 ...