canvas-2drawRectFun.html
2024-08-26 07:38:38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="margin:0 auto;">
The current browser does not support Canvas, can replace the browser a try!
</canvas> <script> // 绘制矩形
function drawRect(ctx,x,y,width,height,borderWidth,borderColor,fillColor){
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x+width,y);
ctx.lineTo(x+width,y+height);
ctx.lineTo(x,y+height);
ctx.closePath(); ctx.lineWidth = borderWidth;
ctx.strokeStyle = borderColor;
ctx.fillStyle = fillColor; ctx.fill();
ctx.stroke();
} window.onload = function(){
var canvas = document.getElementById('canvas'); canvas.width = 1024;
canvas.height = 768; if(canvas.getContext('2d')){
var context = canvas.getContext('2d'); drawRect(context,100,100,400,400,10,"blue","yellow") }else{
alert('当前游览器不支持Canvas,请更换游览器后再试!');
}
}
</script>
</body>
</html>
最新文章
- php 单双引号的区别
- SQLServer字符操作
- 实验验证redis的快照和AOF
- 认识Runtime1
- struts2验证框架1
- [原创] 在spring 中使用quarts
- *ecsho 的商品详细页面上获取该商品的一级分类ID及NAME
- Angularjs Controller 间通信机制
- 【贪心+一点小思路】Zoj - 3829 Known Notation
- 编辑器笔记——sublime text3 编译sass
- 数据库 一致性读&;&;当前读
- mybatis()
- JQ模仿select
- java socket线程通信
- hdu1541 Stars 树状数组
- node.js之setTimeout()、clearTimeout()与 setInterval()与clearInterval()
- 【Ubuntu 16】 SSH免密码登录
- Disconnected from the target VM, address: &#39;127.0.0.1:57178&#39;, transport: &#39;socket&#39;
- mysql format函数对数字类型转化的坑
- HDU 4918 Query on the subtree(动态点分治+树状数组)