html5 canvas绘制矩形和圆形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="draw(),drawarc()">
<!--绘制的步骤：获取canvas元素->取得上下文->填充与绘制边框->设定绘图样式-->
<!--绘制其他复杂图形需要使用路径：开始创建路径->创建图形路径->关闭路径->绘制图形-->
<!--eg:绘制矩形-->
绘制矩形:<canvas id="ca"></canvas><br />
绘制圆形：<canvas id="yuan"></canvas>
</body>
</html>
<script>
//绘制矩形
function draw(){
var canvas=document.getElementById('ca'); //获取canvas元素
if (canvas==null)
return false;
var context=canvas.getContext('2d'); //取得上下文
context.fillStyle='#EEEFF'; //填充颜色
context.fillRect(0,0,400,300); //填充矩形 (矩形1)
context.fillStyle='red';
context.strokeStyle='blue'; //边框颜色
context.lineWidth=1; //边框宽度
context.fillRect(50,50,100,100); //填充矩形（内部矩形2）
context.strokeRect(50,50,100,100); //绘制边框 }
//绘制圆形
function drawarc(){
var canvas2=document.getElementById('yuan'); //获取canvas元素
if (canvas2==null)
if(canvas2==null)
return false;
var context2=canvas2.getContext('2d'); //取得上下文
context2.fillStyle='#EEEEEF';
context2.fillRect(0,0,400,300);
var n=0;
for(var i=0;i<10;i++){
context2.beginPath(); //开始创建路径
context2.arc(i*25,i*25,i*10,0,Math.PI*2,true); //创建圆形路径
context2.closePath(); //关闭路径
context2.fillStyle='Rgba(255,0,0,0.25)'; //设置颜色
context2.fill(); //填充图形
}
} </script>
html5 canvas绘制矩形和圆形的更多相关文章
- h5学习-canvas绘制矩形、圆形、文字、动画
绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果
绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...
- canvas 绘制矩形和圆形
canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...
- HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- HTML5—canvas绘制图形（1）
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
随机推荐
- MyEclipse启动tomcat增加内存配置
omcat增加内存在catalina.bat下 MyEclipse增加内存 设置Window->Preferences->Application Servers->Tomcat -- ...
- Powershell使用SSH
在编写Powershell脚本时,有时会需要和Linux机器进行交互.所以这时就需要在Powershell中使用SSH. 本文将介绍如何在Powershell中安装SSH模块,以及如何使用ssh命令. ...
- UEditor富文本编辑器的使用 http://fex.baidu.com/ueditor/
[转] http://fex.baidu.com/ueditor/ UEditor 介绍 UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体 ...
- mysql高可用集群——MHA架构
目录1.下载2.搭建mha 2.1 系统配置 2.2 架构 2.3 添加ssh公钥信任 2.4 安装mha节点 2.5 manager配置文件 2.6 检查 2.7 启动manager进程 2.8 碰 ...
- 2018年长沙理工大学第十三届程序设计竞赛 Dzzq的离散数学教室1
Dzzq的离散数学教室1 链接:https://www.nowcoder.com/acm/contest/96/D来源:牛客网 zzq的离散数学教室1 时间限制:C/C++ 1秒,其他语言2秒 空间限 ...
- 11-23网页基础--JavaScript基础知识
第一课 JavaScript简介 一.定义:JavaScript是脚本语言,需要宿主文件,它的宿主文件是html文件. JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 ...
- linux命令-fdisk分区
fdisk -l 查看分区状况,也可查看指定分区 Disk /dev/sda: 21.5 GB, 21474836480 bytes 255 heads, 63 sectors/track, 26 ...
- Android中Activity之间的数据传递
在开发中,我们经常涌用到Activity,那么既然用到了Activity,就一定免不了在两个或者多个Activity之间传递数据.这里我们先说一说原理,然后在看看代码和例子. 情况A:我们需要从Act ...
- Android开发国际化
安卓中,国际化十分简单. 其实就是文件夹的问题.一般我们分两种情况. 一是app根据系统语言调用对应的资源文件夹,二是在app里面根据用户的需求来更改语言.前者比较简单,只需求创建对应国家的strin ...
- JS写一个简单的程序，输入两个整数，打印这两个数的和，差，积，余数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...