1
この問題はChrome 18Dev + .Version 17でのみ発生します。 パターンにする領域が黒色で塗りつぶされています。ここでChrome 18Dev +。 Html5キャンバス 'createPattern'はイメージを右に描画できません
はコードだ、あなたはそれをコピーしてクロームでそれを実行することができます：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clock</title>
<style type="text/css">
canvas{
display:block;
width:400px;
height:400px;
border:2px solid #000;
margin:100px auto;
}
</style>
</head>
<body>
<canvas id='c'></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var pic = new Image();
$(function(){
$(pic).load(function() {
var canvas = document.getElementById('c');
canvas.width = 400;
canvas.height = 400;
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = ctx.createPattern(pic, 'repeat');
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.arc(canvas.width*0.5, canvas.height*0.5, 165, 0, Math.PI*2, false);
ctx.fill();
}, 1000);
}
});
});
pic.src = 'https://www.google.com.hk/images/nav_logo105.png';
</script>
</body>