HTML5之Canvas画正方形
HTML5之Canvas画正方形
1、设计源码
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>HTML5之Canvas画正方形</title>
<script type="text/javascript">
function drawFour(id)
{
//获取canvas元素
var canvas = document.getElementById("canvas");
if(canvas == null)
return false;
//获取上下文
var context = canvas.getContext('2d');
//设定填充图形的样式
context.fillStyle = "#EEEEFF";
//绘制图形
context.fillRect(0,0,800,800);
context.fillStyle = "yellow";
//设定图形边框的样式
context.strokeStyle = "blue";
//指定线宽
context.lineWidth = 150;
context.fillRect(50,50,500,500);
context.strokeRect(50,50,500,500);
}
</script>
</head>
<body onLoad="drawFour('canvas')">
<canvas id="canvas" width="1200" height="560"/>
</body>
2、设计结果
3、分析说明
（1）获取Canvas元素
var canvas = document.getElementById("canvas");
（2）取到上下文
var context = canvas.getContext('2d');
（3）填充绘制边框
context.fillStyle = "#EEEEFF";//填充的样式
（4）设定绘图样式
strokeStyle：图形边框的样式
（5）指定线宽
context.lineWidth = 150;
（6）指定颜色值
（7）绘制正方形
context.fillRect(50,50,500,500);
context.strokeRect(50,50,500,500);
HTML5之Canvas画正方形的更多相关文章
- HTML5之Canvas画圆形
HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...
- canvas 画正方形和圆形
绘制正方形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- HTML5之Canvas影片广场
HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...
- html5之canvas画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
- 浅尝HTML5之canvas
转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
随机推荐
- javase学习小结三
格式标识符: System.out.printf("%d,%f,%5d,%-9.4f,%%,%13e",67,78.9,89,78.9,567.345); 输出结果为:67,78. ...
- windows免费？linux免费？赶紧过来看吧
1.今天分享大家一个免费申请linux的网站,可以用来做学习使用! 1.链接地址:https://linuxzoo.net 一次性邮箱:https://temp-mail.org 打开网址申请一个 ...
- BZOJ 1061: [Noi2008]志愿者招募 [单纯形法]
传送门 题意: 长为$n$的序列,第$i$位至少$b_i$,$m$种区间使$[l_i,r_i]+1$代价为$a_i$ 求满足的最小花费 复习单纯形法重做一遍 原始问题$m$个变量$n$个约束,$a_{ ...
- POJ Ikki's Story IV - Panda's Trick [2-SAT]
题意: 圆上n个点,m对点之间连边,连在园内或园外,所有边不相交是否可行 发现两对点连线都在内相交则都在外也相交,那么只有一个在内一个在外啦,转化为$2-SAT$问题 #include <ios ...
- ubuntu14.04安装、NVIDIA显卡驱动安装及CUDA8.0、Cudnn5.1的环境搭建
安装环境:hp-Z440工作站.64位Ubuntu14.04(64位Ubuntu16.04).Cuda8.0.Cudnn5.1.Nvidia GeForce GT 705.Tesla K40c 本文可 ...
- 一个Windows下线程池的实现（C++）
前言 本文配套代码:https://github.com/TTGuoying/ThreadPool 先看看几个概念: 线程:进程中负责执行的执行单元.一个进程中至少有一个线程. 多线程:一个进程中有多 ...
- Python数据结构之三——dict（字典）
Python版本:3.6.2 操作系统:Windows 作者:SmallWZQ 知识源于生活.Python也是如此. 提到字典,我首先想到的是数学大师--高斯. 为何想起他呢?这主要是因为高斯算法 ...
- solr-搭建与使用过程中问题总结-链接
以下错误可以确定在CDH版本Hbase集群+Lily hbase indexer+solrCloud的环境中可以解决,有开源版本解决成功案例的请在下方评论. 1.If you see this err ...
- Docker安装Nginx1.11.10+php7+MySQL
Docker安装php-fpm 1.编辑Dockerfile FROM php:7.1.3-fpm ADD sources.list /etc/apt/sources.list RUN cp /usr ...
- grep命令的-P选项
man grep的时候有一个-P,文档上的英文: -P, --perl-regexp Interpret PATTERN as a Perl regular expression. This is ...